Question

所以我经常遇到的情况是 immediatly 在创建元素后触发CSS转换。通常，我这样做是通过添加一个类。

编辑：代码示例现在内联：

＆＃13;

var ele = document.createElement("div");
ele.id = "target";
ele.innerHTML = "I'm the target element";
document.body.appendChild(ele);
ele.clientHeight; // <-- leave this out, and it will not animate!
document.getElementById("target").className = "foo";

＆＃13;

.foo {
    background-color: #cc0;
    transition:all 3s ease;
}

＆＃13;

但是使用这种（简化的）代码不起作用：

myEle.className = "baseClass";
myEle.className += " transitionClass";

立即添加一个类不会触发任何东西，当JS线程返回时，该元素已经处于转换状态。所以必须做更多的事情。我已经找到了以下方法来实现这一目标：

1）requestAnimationFrame

myEle.className = "baseClass";
requestAnimationFrame(function () { myEle.className += " transitionClass"; });

不幸的是，这不是很可靠，在某些浏览器中它可以正常工作，但通常它不会，尤其是。在Firefox中。

2）setTimeout

myEle.className = "baseClass";
setTimeout(function () { myEle.className += " transitionClass"; }, 50);

现在，这一般起作用，但是我发现我必须使用相当大的值来使其可靠地工作（再次，尤其是在Firefox中） - 大约50ms甚至更多。所以这增加了相当多的滞后。

3）强制重排

myEle.className = "baseClass";
myEle.clientHeight;
myEle.className += " transitionClass";

我最近发现的另一种方法是通过询问像clientHeight这样的属性来强制重新元素。到目前为止，这种方法效果很好，但是正如我所看到的那样，虽然它似乎没有增加延迟，但它可能会增加一些计算开销，因为重排不仅会触发一次（通过添加类），而是两次触发。 / p>

现在，我倾向于使用方法 3），但问题是：

这真的可以全面可靠地运作吗？
这实际上是最快的方法吗？和
CPU开销是否比setTimeout引入的延迟更重要？

当然你应该限制回流到你动画的元素，而不是要求身体宽度，我想这甚至会更昂贵。由于我的大多数动画元素都有位置：绝对无论如何，我也猜测开销实际上并不太重要，但我仍然不确定最好的方式，所以任何提示和见解都非常感谢！

什么是使用Javascript触发CSS转换的最佳方式？

0 个答案: