- Transition(过渡),设置过渡时间,(transition-duration)
<head>
<title>无标题文档</title>
<style>
.box{width:100px;height:100px;background:red; transition:500ms;}
.box:hover{ background:blue;width:200px;height:200px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
- 只设置某一个样式过渡,即要运动的样式,下面的例子设置了width过渡(all | width | height | ... | none):
<head>
<title>无标题文档</title>
<style>
.box{width:100px;height:100px;background:red; transition:500ms width;}
.box:hover{ background:blue;width:200px;height:200px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
- 设置运动形式:transition-timing-function (ease[默认值,逐渐变慢], linea[匀速], ease-in[加速], ease-out[减速], ease-in-out[先加速后减速], cubic-besizer[贝塞尔曲线](http://matthewlein.com/ceaser/))
<head>
<title>无标题文档</title>
<style>
.box{width:100px;height:100px;background:red; transition:5s width cubic-bezier(0.145,1.295,0.000,1.610);}
.box:hover{width:500px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
- 同时设置多个样式的过渡时间,用逗号分隔开,如下
<head>
<title>无标题文档</title>
<style>
.box{width:100px;height:100px;background:red; transition:1s width,2s height,3s background;}
.box:hover{width:500px;height:300px;background:blue;}
</style>
</head>
<body>
<div class="box"></div>
</body>
- 设置延迟时间,transition-delay,即多长时间后开始某个运动,下面的例子中在1s之后高度开始过渡
1 <head>
2 <title>无标题文档</title>
3 <style>
4 .box{width:100px;height:100px;background:red; transition:1s width,2s 1s height,3s 3s background;}
5 .box:hover{width:500px;height:300px;background:blue;}
6 </style>
7 </head>
8 <body>
9 <div class="box"></div>
10 </body>
- 过渡结束时触发指定的执行函数,在过渡结束时,执行alert(“end”)
<head>
<title>无标题文档</title>
<style>
.box{width:100px;height:100px;background:red; transition:1s width;}
</style>
</head>
<body>
<div class="box" ></div>
<script>
var oBox=document.getElementById("box");
oBox.onclick=function()
{
this.style.width=this.offsetWidth+100+"px";
};
addEnd(oBox,function(){
alert("end");
});
function addEnd(obj,fn)
{
obj.addEventListener('WebkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
}
</script>
</body>
- 过渡完成事件
- Webkit内核: obj.addEventListener('webkitTransitionEnd', function(){}, false);
- firefox内核:obj.addEventListener('transitionend', function(){}, false);