转换的性能问题答案

【问题标题】：Performance issues with transitions转换的性能问题
【发布时间】：2016-11-14 22:22:36
【问题描述】：

我的代码可以在这里运行，但是我遇到了一些性能问题，我想问问更有经验的开发人员是否可以做些什么来改进它。我的代码相当简单。我想要实现的是，当您单击图像时，图像会向下滑动，而另一个图像会滑入它的位置。我的第一种方法是：

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% 的时间里，但仍然不够好。我认为问题可能是这样的事实，即显示设置为“无”，然后由我读过的 javascript 应用，这有时不是最好的选择，所以我尝试了一种不同的方法，从完全html：

<div id="myDiv">

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

</div>

和

.page-2 {display: none;}

从我的 css 中改用 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

【问题讨论】：

您也可以创建堆栈 sn-p。

标签： javascript jquery html css css-transitions

【解决方案1】：

浏览器不会预加载使用 display: none 隐藏的图像。尝试 opacity: 0 代替。

【讨论】：

我已经尝试过了，但在我的 javaScript $('.page-2').css('opacity', '1');不知道为什么不工作

【解决方案2】：

在页面加载时预加载所有图片。例子： Myimg = 新图像（）； myimg.src = x.

【讨论】：

【解决方案3】：

编辑：我没有注意到您默认设置了display:none。在这种情况下，您应该按照@fearmear 的建议进行操作

另一方面，您可以采取一些措施来提高动画性能：

使用 3d 变换

这将强制 GPU 加速

使用will-change: transform

这将通知浏览器您打算为元素设置动画

【讨论】：

【解决方案4】：

jQuery 有很多方法在不同程度上做同样的事情。在众多方法中，此代码段使用slideDown() 方法和add/removeClass() 方法，以及.om 和.off 类来提供转换。

顺便说一句，我一不小心开始倒退了，但是现在我太累了无法改变它，前进我就交给你了-_- zzZZZZ

片段

$(function() {
  $('#xBtn1').on('click', slideNext);

  function slideNext() {
    $('.page.on').slideDown('slow', function() {
      var next = $(this).prev('.page');
      $('.page.on').removeClass('on').addClass('off');
      next.slideDown('slow').removeClass('off').addClass('on');
    });
  }
});

.on {
  display: block;
  opacity: 1;
  transition: opacity 1.5s ease-in;
}
.off {
  display: none;
  opacity: 0;
  transition: opacity 1.5s ease-out;
}
#xList1 {
  list-style: none;
  overflow-y: hidden;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id='xBtn1'>NEXT</button>

<ul id="xList1">
  <li class="page off" id='xPage1'>
    <img src='http://placehold.it/50x50/000/fff?text=1'>
  </li>
  <li class="page off" id='xPage2'>
    <img src='http://placehold.it/50x50/00f/eee?text=2'>
  </li>
  <li class="page off" id='xPage3'>
    <img src='http://placehold.it/50x50/0e0/111?text=3'>
  </li>
  <li class="page off" id='xPage4'>
    <img src='http://placehold.it/50x50/f00/fff?text=4'>
  </li>
  <li class="page off" id='xPage5'>
    <img src='http://placehold.it/50x50/fc0/000?text=5'>
  </li>
  <li class="page on" id='xPage6'>
    <img src='http://placehold.it/50x50/930/fc0?text=6'>
  </li>
</ul>

【讨论】：