jQuery如何临时关闭CSS transition实现幻灯片快速位移后恢复动画

根因分析 #

你遇到的问题是浏览器的DOM样式渲染优化机制导致的：同一事件循环内的多次样式修改操作会被浏览器合并后统一渲染，你连续执行添加无过渡类、移动位置、移除无过渡类的操作时，三步样式变更被合并执行，相当于禁用过渡的配置没有生效，位移操作还是带着0.5s的过渡执行，因此无法实现无动画快速移动到左侧的效果。

修复方案 #

在移除无过渡类之前，主动触发一次浏览器重绘，强制浏览器先渲染「禁用过渡+移动到左侧」的样式，再恢复过渡属性，后续的滑入动画就会正常从左侧切入。

修正后的JS代码 #

let previous = $('#' + $(this).attr('data-slide'));
let currentVisible = $('.visible');

// 预定位目标幻灯片到左侧待显示位置
previous.addClass('removedTransition');
previous.addClass('movedLeft');
// 读取offsetWidth强制触发重绘，让上面的样式立即生效
void previous[0].offsetWidth;
previous.removeClass('removedTransition');

// 执行切换动画
currentVisible.removeClass('visible');
previous.addClass('visible').removeClass('movedLeft');

// 可选优化：动画结束后重置旧幻灯片到右侧默认位置，避免后续切换异常
setTimeout(() => {
  currentVisible.addClass('removedTransition');
  // 复位到右侧待位
  void currentVisible[0].offsetWidth;
  currentVisible.removeClass('removedTransition');
}, 500) // 时长和CSS中transition的0.5s保持一致

可选CSS优化 #

给幻灯片父容器添加溢出隐藏，避免滑动过程中幻灯片超出显示边界：

.slides {
  position: relative;
  width: 300px;
  /* 替换为你的图片实际高度 */
  height: 200px;
  overflow: hidden;
}

如果需要让预定位的幻灯片完全隐藏在左侧，可以调整位移值：

.slide.movedLeft {
  transform: translateX(-100%);
}

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