javascript - jquery 动画和 css 动画之间的滞后

Question

我将 5 张图像堆叠在一起，方法是为所有图像分配一个绝对位置，并使用相同的顶部和左侧坐标以及不同的 z-index。

我的目标是旋转、平移并将具有最高 z-index 的图像的不透明度变为 0，并将所有其他图像的 z-index 增加 1。我正在使用 CSS 转换为具有最高索引的图像设置动画，并使用 jquery 更改其他图像的 z-index。我的代码如下:

var i = 1;

function swypeStyle(){
  var imageLength = $('.my-image').length;

  $('.my-image').each(function(){
    $(this).removeClass('rotated');
  });

  $("#image"+i).addClass('rotated'); 

  setTimeout(function(){
    for(var j = 1; j <= imageLength; j++){

      var currentZindex = $('#image'+j).css('z-index');

      if(currentZindex == imageLength){
        currentZindex = 1;
      }else{
        currentZindex++;
      }

      $('#image'+j).css('z-index',currentZindex);
    }
  }, 1100);


  if(i == imageLength){
    i = 1;
  }else{
    i++;
  }
}

window.setInterval(function () {
	swypeStyle(); 
}, 3000);

.my-image{
  width: 144px;
	left: 0px;
  top: 0px;
  position: absolute;
}

.my-image.rotated {
	left: -150px;
	top: 25px; 
	-webkit-transform: rotate(-30deg);
	opacity: 0;
	-webkit-transition: all 1s ease-in-out;
}

<img src="https://www.otop.sg/retailer/images/image1.jpg" class="my-image" id="image1" style="z-index: 5;">
<img src="https://www.otop.sg/retailer/images/image2.jpg" class="my-image" id="image2" style="z-index: 4;">
<img src="https://www.otop.sg/retailer/images/image3.jpg" class="my-image" id="image3" style="z-index: 3;">
<img src="https://www.otop.sg/retailer/images/image4.jpg" class="my-image" id="image4" style="z-index: 2;">
<img src="https://www.otop.sg/retailer/images/image5.jpg" class="my-image" id="image5" style="z-index: 1;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我的动画运行良好，问题是当我切换并花一些时间在另一个 chrome 选项卡上时，当我返回我的脚本 chrome 选项卡时，我的 css 动画和我的 jquery 动画之间存在滞后。

Answer 1

问题在于，当您的标签页处于非事件状态时，Chrome 会暂停动画等元素，以降低资源利用率。

我的建议是仅在 CSS 中完成所有转换/动画，并使用 Javascript 仅添加/删除类；这样动画将保持同步。