css3动画-transition

当css属性改变的时候，控制animation的速度，让属性的变化发生在一段时间之内，而不是立即生效。

语法

transition: <property> <duration> <timing-function> <delay>;

property：css属性的name， 支持的属性列表

duration：持续时间

timing-function：运动曲线

一个折叠菜单例子：

 <style type="text/css">
     ul, li{
       list-style:none;
       float: left;
     }
     ul.menu {
         overflow: hidden;
         width: 50px;
         height: 50px;
     }
     ul.fold {
         width: 0px;
       height: 0px;
       transition: width 1s, height 1s;
       -webkit-transition: width 1s, height 1s;
       -moz-transition: width 1s, height 1s;
       -o-transition: width 1s, height 1s;
     }
     ul.unfold {
       width: 50px;
       height: 50px;
       background-color: #fff;
       transition: width 1s, height 1s;
       -webkit-transition: width 1s, height 1s;
       -moz-transition: width 1s, height 1s;
       -o-transition: width 1s, height 1s;
     }
 </style    

css

html:

 <ul class="menu unfold" id="menu1">
     <li>11111111</li>
     <li>22222222</li>
 </ul>

js：

 var v1 = document.getElementById("menu1");
 function flod(){
     className = v1.className;
     v1.className = "menu" + (/\s+fold/.test(className) ? " unfold" : " fold");
 }
 v1.addEventListener("click", flod, false);

检测transition完成

transition完成后transitionend事件将被触发，如果transition还没有完成就被abort，将不会触发transitioned事件

 v1.addEventListener('transitionend', function(e){
     alert(e.propertyName + "|" + e.elapsedTime);
 });

js

在webkit中事件名称是webkitTransitionEnd，可以查看兼容列表

transition让js function过度更平滑

p {
  padding-left: 60px;
}

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top:;
  left:;
  -webkit-transition: all 1s;
  transition:  all 1s;
}

Css

html：

<p>Click anywhere to move the ball</p>
<div id="foo"></div>

js：

var f = document.getElementById('foo');
var info = document.getElementById('eventInfo');
document.addEventListener('click', function(ev){
    f.style.left = (ev.clientX-25)+'px';
    f.style.top = (ev.clientY-25)+'px';
},false);

当鼠标点击页面的时候，红色的圆会在1s内运动到当前位置。

浏览器兼容

Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
-webkit-transition	-moz-transition	10	-o-transition	-webkit-transition
webkitTransitionEnd	4.0 (2.0)	10	10  oTransitionEnd 12  otransitionend 12.10   transitionend	webkitTransitionEnd