Question

我正在尝试创建无限水平滚动的“幻灯片”类型的动画。我有以下代码，效果很好，但是动画有时看起来有些毛刺。在Edge中，这是最糟糕的情况，但在我测试过的所有浏览器中有时都会出现故障。

我的HTML看起来像这样：

<div class='filmstrip-wrapper'>
  <div class='filmstrip'> <!-- There must be NO whitespace between frames!-->
    <div class='filmstrip-frame'>
      <img src='img/l1.png'/>
    </div><div class='filmstrip-frame'>
      <img src='img/l2.png'/>
    </div><div class='filmstrip-frame'>
      <img src='img/l3.png'/>
    </div><!-- and so on... -->
</div>

相关的scss是：

.filmstrip{
  white-space: nowrap;

  &-wrapper{
    animation: filmstrip-animation 5s linear infinite;
  }

  &-frame{
    display: inline-block;
    width: 276px;
    height: 150px;
    margin: 0 12px;
    img{
      display: block;
      margin: auto;
      max-width: 100%;
      max-height: 100%;
    }
  }
}

@keyframes filmstrip-animation{
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(-300px);
  }
}

最后我有以下javascript：

var filmstrip = document.getElementsByClassName('filmstrip-wrapper')[0];
filmstrip.addEventListener('animationiteration', function(){
  // Loop through all the frames and swap their images
  var filmstripFrames = document.getElementsByClassName('filmstrip-frame');
  var nextImg = filmstripFrames[0].getElementsByTagName('img')[0].src;
  for (var i = filmstripFrames.length-1; i >= 0; --i) {
    // iterate backwards. (For some reason reverse() wasn't working...)
    var frame = filmstripFrames[i];
    var img = frame.getElementsByTagName('img')[0];
    var imgSrc = img.src;
    img.src = nextImg;
    nextImg = imgSrc;
  }
});

基本上，胶卷中的每个元素的宽度均为300px，因此动画在无限循环中向左滚动300px，并在每次动画循环时交换图像。我喜欢这种解决方案，因为它很简单，并且主要依靠css，而不会像固定宽度包装器，难以处理的怪异css或复制html代码那样做出牺牲。

我可以肯定的是，由于animationiteration事件并不总是在CSS动画循环时的确切时间触发，因此我很确定出现了故障。但是，我不确定该如何解决。有没有办法告诉浏览器优先处理该事件，使其始终按时运行？

编辑：添加了代码笔：https://codepen.io/dmj/pen/vVpdEe 图片无法显示，因为据我所知CodePen没有提供上传图片的方法，但是您甚至可以看到“破损的图片”图标出现故障，然后...

无限水平滚动胶片上的垃圾动画

0 个答案: