CSS3之过渡及过渡事件
CSS3之过渡及过渡事件
1. Transition过渡
l transition-property 要运动的样式 （all || [attr] ||none）
l transition-duration 运动时间
l transition-delay 延迟时间
l transition-timing-function 运动形式
• ease：（逐渐变慢）默认值
• linear：（匀速）
• ease-in：(加速)
• ease-out：（减速）
• ease-in-out：（先加速后减速）
• cubic-bezier 贝塞尔曲线（ x1,y1, x2, y2 ）http://matthewlein.com/ceaser/
l 实例：幻灯片效果
例1：过渡全部属性
<style>
.box{width:100px;height:100px;background:red; transition:500ms;}
.box:hover{background:blue;width:200px;height:200px;}
</style>
</head>
<body>
<divclass="box"></div>
</body>
例2：过渡宽度
<style>
.box{width:100px;height:100px;background:red; transition:500ms width;}
.box:hover{background:blue;width:200px;height:200px;}
</style>
</head>
<body>
<divclass="box"></div>
</body>
例3：加入过渡形式
<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>
<divclass="box"></div>
</body>
例4：多样式过渡
<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>
<divclass="box"></div>
</body>
例5：延时时间过渡（高度延时1s,背景延时3S）
<style>
.box{width:100px;height:100px;background:red;transition:1s width,2s 1s height,3s 3s background;}
.box:hover{width:500px;height:300px;background:blue;}
</style>
</head>
<body>
<divclass="box"></div>
</body>
过渡完成事件
Webkit内核：obj.addEventListener('webkitTransitionEnd',function(){},false);
firefox:obj.addEventListener('transitionend',function(){},false);
例1：
<body>
<divclass="box" id="box"></div>
<script>
varoBox=document.getElementById("box");
oBox.onclick=function()
{
this.style.width=this.offsetWidth+100+"px";
};
addEnd(oBox,function(){
alert("end");
});
functionaddEnd(obj,fn)
{
obj.addEventListener('WebkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
}
</script>
过渡完成后弹出end
例2：
每改变一次样式，触发一次end事件
<style>
.box{width:100px;height:100px;background:red;transition:1s width,2s height;}
</style>
</head>
<body>
<divclass="box" id="box"></div>
<script>
varoBox=document.getElementById("box");
oBox.onclick=function()
{
this.style.width=this.offsetWidth+100+"px";
this.style.height=this.offsetHeight+100+"px";
};
addEnd(oBox,function(){
alert("end");
});
functionaddEnd(obj,fn)
{
obj.addEventListener('WebkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
}
</script>
</body>
弹出2次end,width改变触发一次，height改变触发一次
例3：
小bug:
<style>
.box{width:100px;height:100px;background:red;transition:1s width;}
</style>
</head>
<body>
<divclass="box" id="box"></div>
<script>
varoBox=document.getElementById("box");
oBox.onclick=function()
{
this.style.width=this.offsetWidth+100+"px";
};
addEnd(oBox,function(){
this.style.width=this.offsetWidth+100+"px";
});
functionaddEnd(obj,fn)
{
obj.addEventListener('WebkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
}
</script>
点击后，宽度会不断的增加：
首先，点击后，宽度增加100，改变了样式，触发transition，接着触发transitionend,这又改变了宽度，接着再触发transition,以此循环，不断变宽
解决方法：
Transition结束后，取消事件
<body>
<divclass="box" id="box"></div>
<script>
varoBox=document.getElementById("box");
oBox.onclick=function()
{
this.style.width=this.offsetWidth+100+"px";
addEnd(oBox,end);
};
function end()
{
this.style.width=this.offsetWidth+100+"px";
removeEnd(this,end);
}
functionaddEnd(obj,fn)
{
obj.addEventListener('WebkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
}
functionremoveEnd(obj,fn)
{
obj.removeEventListener('WebkitTransitionEnd',fn,false);
obj.removeEventListener('transitionend',fn,false);
}
</script>