Question

我的html页面中有一个列表。有一个按钮，允许用户将项目添加到列表中。每当用户添加新项目时，它将具有动画效果，让新项目从左移动到中心

 $("#addNewItem").on("click",function(){
    $('.List').append('<li class="listLeft listTransition"></li>');
    setTimeout(function () {
               $('#newLi').removeClass('listLeft');
               $('#newLi'.addClass('listCenter');
               }, 10);
});
//css class
    .listLeft{
        -webkit-transform: translate3d(-100%, 0, 1px);
        transform: translate3d(-100%, 0, 0);
    }
    .listCenter{
        -webkit-transform: translate3d(0, 0, 1px);
        transform: translate3d(0, 0, 0);
    }
    .listTransition{
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
    }

它在前几次尝试时效果很好，点击次数超过3次后，转换速度会变慢。等待项目动画到中心需要2-3秒。在我尝试了7次之后，它会变得更慢。这与列表大小无关，因为如果我重新启动并重新打开应用程序，通过拥有更大的列表项，前几次尝试将始终具有良好的性能。第4次点击后，转换变慢。

之前我使用jquery .animate（'left'，1000）来进行转换。我认为这是导致转换缓慢的原因，所以我通过使用webkit转换切换到硬件加速，但最终结果是相同的，所以我猜没有任何相关的东西。

在测试期间，我在$（'。List'）。append（）之前发出警告（'测试'），我注意到这意外地解决了我的问题，也许警报（）会清除一些缓存或做某事，但我不知道不知道。不幸的是这不允许提示警告框，所以它不能解决我的问题，我尝试使用bootstrap模态对话框来做同样的事情，但是它在4次点击后也没有给我平滑过渡

我想知道什么是可以解决我的问题的alert（）里面的魔法，然后我可以复制类似的代码逻辑而不调用alert（）。如果我能知道根本原因那就好了

几次点击后，cordova css转换速度变慢

0 个答案: