小编eri*_*lem的帖子

requestAnimationFrame用于开始CSS转换

请求动画帧开始CSS转换是否有意义?

例如,Mozilla CSS转换页面包含指向此jsfiddle示例的链接:

CSS:

#foo{
    border-radius:50px;
    width:50px;
    height:50px;
    background:#c00;
    position:absolute;
    top:0;
    left:0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;  
    -ms-transition: all 1s;  
    -o-transition: all 1s;  
    transition: all 1s;  
}
Run Code Online (Sandbox Code Playgroud)

JavaScript的:

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

重写这个例子如下有意义吗?(见这个jsfiddle)

JavaScript的:

var rAF = window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame;
var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
    rAF(function() {
        f.style.left = (ev.clientX-25)+'px';
        f.style.top = (ev.clientY-25)+'px';
    });
},false);
Run Code Online (Sandbox Code Playgroud)

谢谢你的回答.

javascript html5 animation requestanimationframe

6
推荐指数
1
解决办法
3969
查看次数