重新设置CSS动画的高性能方法

Question

小提琴：https://jsfiddle.net/fkvqk0on/1/

我正在写一个Cordova应用程序，有一个按钮，每次你点击它都会弹出。我还想让它在滑动后弹出，所以我编写了一个系统，从JavaScript调用动画。在这里，它目前是如何工作的：

• 有一个弹出的CSS动画
• 在滑动时，JS向按钮中添加一个类，该按钮为其提供动画。
• 下次有一个滑动，JS删除类，然后再添加它

这个系统在我的电脑上运行得很好，但在我的手机上却很慢。有时它不能动画，如果我连续几次滑动！我如何使一个更优化的系统来做到这一点？

​

var target = document.getElementById("textTarget");
var button = document.getElementById("button");

function pop() {
  target.classList.remove("popAnimation");
  setTimeout(function() {
    target.classList.add("popAnimation");
  }, 10);
}

button.onclick = pop;

.popAnimation {
  animation: popKeyframes 200ms linear both;
}

@keyframes popKeyframes {
  50% {
    transform: scale(1.2);
  }
}

<script src="https://leaverou.github.io/prefixfree/prefixfree.js"></script>

<p id="textTarget">
  Here is the animation target.
</p>

<button type="button" id="button">Animate</button>

​

Answer 1

通过将这个CSS添加到类中，您将触发硬件加速，从而提高动画的性能。

-webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);