自动播放淡入淡出轮播中slide动画切换时重复触发问题求助

• 类绑定的动画重复触发：你给第一张slide绑定的.slidein-left类带有自动执行的CSS动画，而轮播逻辑会把所有slide循环移动到容器末尾重新排队，当带该类的slide再次被移到队首显示时，浏览器会判定元素被重新插入DOM，自动重新触发滑入动画，就会出现重复滑入的异常。
• 定位属性冲突：.slidein-left中设置的position: relative覆盖了父级规则里的position: absolute，导致轮播切换时元素定位偏移，出现“重载”闪烁的视觉效果。

1. 修正CSS定位冲突 #

删除.slidein-left中多余的position: relative规则，继承父级的绝对定位即可，修改后的CSS片段：

.slidein-left {
  left: -100%;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-animation: slideleft 1s forwards 0.5s;
  animation: slideleft 1s forwards 0.5s;
}

2. 避免动画重复触发 #

在JS中添加动画结束监听，首张slide的滑入动画完成后直接移除.slidein-left类，后续轮播就不会再触发该动画，修改后的完整JS代码：

$("#slideshow > div:gt(0)").hide();

// 监听动画结束事件，执行完自动移除动画类，无需硬编码时间，兼容性更好
$('.slidein-left').on('animationend webkitAnimationEnd', function() {
  $(this).removeClass('slidein-left');
});

setInterval(function() { 
  $('#slideshow > div:first')
  .fadeOut(1000)
  .next()
  .fadeIn(1000)
  .end()
  .appendTo('#slideshow');
}, 3000);

修改后即可解决重复滑入、切换闪烁的异常问题。

内容的提问来源于stack exchange，提问作者Teague