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    

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);
});

 

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

transition让js function过度更平滑

p {
  padding-left: 60px;
}

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

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