过渡中的性能问题

Question

我有一些代码可以在这里工作，但我遇到了一些性能问题，我想问问更有经验的开发人员，我是否可以做些什么来改进它。我的代码相当简单。我想要实现的是，当你点击一个图像，图像滑下来，另一个幻灯片在它的位置。我的第一个方法是：

html

<div id="myDiv">

    <div class="page page-1"><img src="img1.jpg" width="100%"></div>
    <div class="page page-2"><img src="img2.jpg" width="100%"></div>

</div>

css

.page-2 {display: none;}

.page-moveFromTop {
    -webkit-animation: moveFromTop 2s ease both;
    animation: moveFromTop 2s ease both;
}

.page-moveToBottom {
    -webkit-animation: moveToBottom 2s ease both;
    animation: moveToBottom 2s ease both;
}


@keyframes moveFromTop {
    from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@keyframes moveToBottom {
    from { }
    to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}

然后在我的js上：

$(document).ready( function () {


   $('#myButton').click(function(){

      $('.page-1').addClass('page-moveToBottom');

      $('.page-2').css('display', 'block');

      $('.page-2').addClass('page-moveFromTop');

   });
});

所以这是可行的，但我遇到了一些问题，在我按下按钮，在转换发生之前，有时会有第二个图像的快速闪烁，有时转换会被完全绕过。这只发生了20%的时间，但仍然不够好。我想，问题可能在于，显示设置为"none“，然后由我所读过的javascript应用，这有时不是最好的选择，所以我尝试了一种不同的方法，将第二个图像从html中全部删除：

<div id="myDiv">

    <div class="page page-1"><img src="img1.jpg" width="100%"></div>

</div>

和

.page-2 {display: none;}

使用append()函数修改javascript：

$(document).ready( function () {

   $('#myButton').click(function(){

      $('.page-1').addClass('page-moveToBottom');

      $('<div class="page page-2"><img class="image" src="ecran2.jpg" width="100%"></div>').appendTo("#pt-main");

      $('.page-2').addClass('page-moveFromTop');
      });
 });

同样，这也有效，但我得到了我前面提到的不一致的问题。因此，我想知道的是，在性能方面是否有一种更可靠的最佳实践方法。耽误您时间，实在对不起。P

Answer 1

浏览器将不会预加载隐藏在显示中的图像:无。尝试不透明度:0代替。

Answer 2

编辑:我没有注意到您默认设置了display:none。在这种情况下，你应该按照“恐惧”的建议来做

另一方面，你可以做一些事情来提高你的动画表现：

使用三维变换

这将迫使GPU加速。

will-change: transform 使用

这将通知浏览器您想要动画元素。

Answer 3

在页面加载上预加载所有图像。示例: Myimg = new ()；Myimg.src = x。