6

请求一个动画帧来开始 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);

感谢您的任何回答。

4

2 回答 2

3

不，不是的。在现代浏览器中，所有动画、CSS 过渡、CSS 动画、SMIL、element.animate 都由同一个内部引擎控制。浏览器将在下一个可用帧上开始您的动画。RAF 和原生动画有不同的线程。RAF 用于 JavaScript 动画。该重写将只等待几毫秒，直到设置这些更改。之后，您的动画将由内部引擎控制。

于 2015-04-02T12:22:12.747 回答
3

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

rAF(requestAnimationFrame)在这个例子中没有用。因为您正在使用 css 转换滑动元素并调用 rAF 一次。您必须通过逐帧调用 rAF 来循环道具更改，以通过浏览器优化 CPU、GPU 性能。

关于 rAF 的主要思想：

当你想在没有 css 动画的情况下为 dom 元素设置动画时，你必须定期更改元素的样式属性（如宽度、高度、顶部、左侧等） 。

如果没有 rAF，则必须使用 setTimeout、setInterval 函数来根据时间更改道具。但是浏览器不会优化这些进程，这对 CPU、GPU 性能来说可能是痛苦的。

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

有用的链接：

智能动画的 requestAnimationFrame

requestAnimationFrame

于 2015-04-02T11:13:58.483 回答