不使用scale实现轮播图缩放及transition动画异常问题咨询

为什么移除带transition的CSS类后，过渡动画还是会执行 #

浏览器不会在你每次修改DOM、调整样式的时候立刻刷新页面渲染，所有样式变更会被缓存，等当前同步JS代码全部执行完之后，才会统一计算最终样式、执行重排重绘。
你之前的代码逻辑是同步移除类、同步修改scale值，再在下一帧加回类。整个流程里浏览器根本没机会渲染「元素不带transition、scale为1」的中间状态，等它真正开始计算要渲染什么样式的时候，元素已经被加回了带transition的类，检测到transform值发生了变化，自然就会触发过渡动画。 #

不使用独立scale属性的实现方案 #

你完全不需要用兼容性差的独立scale属性，用支持度极高的transform: scale()就能实现相同效果，这个写法兼容所有主流浏览器甚至低版本IE，不需要担心兼容问题。针对轮播场景有两种非常成熟的实现方式：

• 方案1：修正transition的触发时序，配合强制重排实现
  核心逻辑是切页时先移除所有轮播页的动画类，强制浏览器立刻渲染「无过渡、缩放值为1」的初始状态，再给当前展示的轮播页加上动画类，触发缓慢放大的过渡。
  核心JS代码：

  function switchToSlide(targetSlide) {
    // 先清除所有轮播页的激活状态
    document.querySelectorAll('.carousel-slide').forEach(slide => {
      slide.classList.remove('active')
    })
    // 读取DOM属性强制触发重排，让浏览器立刻应用上面的样式变更
    void targetSlide.offsetHeight
    // 给目标页加激活类，触发缩放动画
    targetSlide.classList.add('active')
  }
  

  对应CSS：

  .carousel-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
  }
  .carousel-slide.active .slide-img {
    transform: scale(1.1);
    transition: transform 6s ease-out;
  }
  

• 方案2：用CSS关键帧动画代替transition，无需手动处理重置逻辑（推荐）
  直接写一个从原始大小缓慢放大的关键帧动画，绑定在轮播页的激活状态类上。每次切页给新页面加激活类时，动画会自动从头播放，完全不需要手动重置缩放值、也不用考虑重排时序问题，代码更简洁不容易出bug。
  对应CSS：

  .carousel-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .carousel-slide.active .slide-img {
    animation: slowZoom 6s ease-out forwards;
  }
  @keyframes slowZoom {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
  }
  

  切页时只需要把active类从旧轮播页移到新页面即可，不需要其他额外逻辑，和轮播的切页逻辑适配度非常高。

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