css3动画-transition

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

语法

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

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

 });

在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`

巴特西

css3动画-transition

语法

检测transition完成

transition让js function过度更平滑

浏览器兼容

最新文章

热门文章