移除enable类后transform过渡效果未生效，附完整代码示例

你看到的无平滑跳变，本质是 CSS动画对元素样式的优先级覆盖，和transition触发规则不匹配导致的，具体逻辑拆解：

• 当元素携带enable类时，会绑定appearPageShower关键帧动画。哪怕动画已经播放到100%完成态，只要类名还没被移除，动画会持续把元素的transform值锁定在关键帧定义的translateY(0)，这个优先级远高于.backgroundColor类上定义的基础transform: translateY(100%)和transition规则。
• 2秒后移除enable类的瞬间，动画的样式锁定直接消失，浏览器直接将元素的渲染值跳回基础规则定义的translateY(100%)。因为transition只在「同一套样式来源下，前后两个可过渡属性值的变化」时才会触发，你现在的切换是「动画锁死的状态」直接切到「普通CSS规则生效的状态」，被浏览器判定为样式来源的整体变更，不会触发预设的过渡效果。

• 方案1：保留原有关键帧动画，在动画结束后正确触发过渡
  调整JS逻辑，等动画播放完成后，先主动解除动画对样式的锁定，再移除enable类：

  const target = document.querySelector('.page-holder').children[0].children[0];
  target.addEventListener('animationend', () => {
    // 清空动画属性，解除对transform的强制锁定
    target.style.animation = 'none';
    // 强制触发一次浏览器重排，确保样式变更生效
    void target.offsetWidth;
    // 再移除类名，此时transform从0切到100%会正常触发预设transition
    // 如果需要保持原逻辑里2秒的等待时长，可在此处额外嵌套setTimeout包裹移除逻辑
    target.classList.remove("enable");
  });
  

• 方案2：简化逻辑，全程用过渡实现双向动画
  你当前的进出滑动需求完全不需要依赖关键帧，直接调整CSS规则即可，逻辑更简洁也不会出现冲突：

  /* 直接删除原本的@keyframes appearPageShower规则 */
  .each-page .backgroundColor.enable {
    transform: translateY(0);
  }
  

  调整后：元素默认状态是translateY(100%)，加上enable类时靠预设的1s过渡滑到translateY(0)；移除enable类时，同样靠同一个过渡平滑滑回translateY(100%)，全程无跳变。

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