滑块在≤100px区间移动时fadeInRight动画反复重启问题求助

问题根因 #

你绑定的touchmove事件会在滑块滑动过程中高频触发，只要滑块位置处于<=100的区间内，每次事件回调都会重复给.hero3设置display:block属性。哪怕.hero3已经处于显示状态，重复修改display属性会触发浏览器样式重排，绑定在.hero3上的fadeInRight动画每次重排都会重新执行，就导致了区间内滑动时动画反复重启的问题。

解决方案 #

方案1：添加状态标记，避免重复修改元素显示状态 #

新增变量记录当前激活的hero类型，只有当激活类型发生变化时，才修改对应元素的display属性，代码修改如下：

// 全局定义激活状态标记，初始值可以根据默认显示的hero设置
let activeHero = 'hero'
function activeTouchmove(e, data) {
  var event = data.event;
  var timer = data.timer;
  var touch = changedTouch(e, event);
  if (!touch) { return; }
  // Stop the interface from gesturing
  e.preventDefault();
  event.targetTouches = e.targetTouches;
  data.touch = touch;
  data.timeStamp = e.timeStamp;
  timer.kick();
  const sliderLeft = Number($('.slider').css('left').replace(/[^-\d\.]/g, ''))
  let currentHero
  if (sliderLeft >= 300) {
    currentHero = 'hero2'
  } else if (sliderLeft <= 100) {
    currentHero = 'hero3'
  } else {
    currentHero = 'hero'
  }
  // 只有激活状态变化时才修改显示属性
  if (currentHero !== activeHero) {
    activeHero = currentHero
    $('.hero').css('display', currentHero === 'hero' ? 'block' : 'none');
    $('.hero2').css('display', currentHero === 'hero2' ? 'block' : 'none');
    $('.hero3').css('display', currentHero === 'hero3' ? 'block' : 'none');
  }
}

方案2：将动画绑定到激活类上，避免元素默认携带动画 #

修改CSS，把动画属性从.hero3默认样式移动到专属的激活类中，只有元素切换到激活状态时才会触发一次动画：

/* 移除hero3默认的动画属性，其余原有属性保留 */
.hero3{}
/* 新增激活类绑定动画 */
.hero3.active{
  animation: fadeInRight linear 0.5s;
  -webkit-animation: fadeInRight linear 0.5s;
  -moz-animation: fadeInRight linear 0.5s;
  -o-animation: fadeInRight linear 0.5s;
  -ms-animation: fadeInRight linear 0.5s;
}
/* 其余动画@keyframes代码保留不变 */

对应JS同步修改为切换active类的逻辑即可。

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