请求AnimationFrame开始CSS过渡

Question

请求动画框架开始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;  
}

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

重写以下示例是否有意义？（请参阅此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);

感谢您的任何答案。

Answer 1

我知道问题是旧的，但这对某人可能很有用。

在此示例中，

RAF（requestAnimationFrame）是没有用的。因为您是带有CSS过渡的滑动元素，并且一次调用RAF。您必须循环道具通过通过框架调用RAF框架进行更改，以优化浏览器的CPU，GPU性能。

关于RAF的主要思想：

当您想在没有CSS动画的情况下对DOM元素进行动画元素时，您必须更改元素的样式属性（例如宽度，高度，顶部，左，左，左，左，左，左，

没有RAF，您必须使用settimeout，setInterval函数来根据时间更改道具。但是浏览器不会优化这些过程，对于CPU，GPU性能可能会很痛苦。

当您使用RAF时，现代浏览器可以使用较少的CPU，GPU使用来优化动画性能。

有用的链接：

smart Animation的请求AnimationFrame

requestAnimationFrame

Answer 2

no不。在现代浏览器中，CSS过渡，CSS动画，SMIL，Element。生动由同一内部引擎控制。浏览器将在下一个可用框架上启动您的动画。皇家空军和本地动画有不同的线程。RAF是用于JavaScript动画的。重写只会等待几毫秒直到设置这些更改。之后，您的动画将由内部引擎控制。