Question

我正在编写一个带有按钮的Cordova应用程序，该按钮会弹出＆＃34;每次点击它。我也希望它在滑动后弹出，所以我写了一个系统来从JavaScript调用动画。这是它目前的工作原理：

pop
在滑动时，JS会向按钮添加一个类，为其提供动画
下次刷卡时，JS会删除该类，然后重新添加

这个系统在我的电脑上运行良好，但它在我的手机上很迟钝而且速度很慢。如果我连续多次滑动，有时它无法动画！如何制作更优化的系统呢？

＆＃13;

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;

＆＃13;

.popAnimation {
  animation: popKeyframes 200ms linear both;
}

@keyframes popKeyframes {
  50% {
    transform: scale(1.2);
  }
}

＆＃13;

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

＆＃13;

Answer 1

使用此CSS添加到您的课程中，您将触发硬件加速，提高动画的性能

//get the grid data to array      
var rows = $('#jqxgrid').jqxGrid('getrows');
//  get the length of the array on array.length using javascript funcation
alert('' + rows.length);

重置CSS动画的高性能方法

1 个答案: