css3动画-transition

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

语法

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

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

duration：持续时间

timing-function：运动曲线

一个折叠菜单例子：

 1 <style type="text/css">
 2     ul, li{
 3       list-style:none;
 4       float: left;
 5     }
 6     ul.menu {
 7         overflow: hidden;
 8         width: 50px;
 9         height: 50px;
10     }
11     ul.fold {
12         width: 0px;
13       height: 0px;
14       transition: width 1s, height 1s;
15       -webkit-transition: width 1s, height 1s;
16       -moz-transition: width 1s, height 1s;
17       -o-transition: width 1s, height 1s;
18     }
19     ul.unfold {
20       width: 50px;
21       height: 50px;
22       background-color: #fff;
23       transition: width 1s, height 1s;
24       -webkit-transition: width 1s, height 1s;
25       -moz-transition: width 1s, height 1s;
26       -o-transition: width 1s, height 1s;
27     }
28 </style
css

html:

1 <ul class="menu unfold" id="menu1">
2     <li>11111111</li>
3     <li>22222222</li>
4 </ul>

js：

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

 检测transition完成

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

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

在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;
}
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内运动到当前位置。

浏览器兼容

AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
-webkit-transition -moz-transition 10 -o-transition -webkit-transition

webkitTransitionEnd

 4.0 (2.0) 10 10  oTransitionEnd
12  otransitionend
12.10   transitionend		 webkitTransitionEnd
posted @ 2014-07-27 13:18  舟~  阅读(275)  评论(0)  编辑  收藏  举报