如何限制CSS过渡仅在active与above/below类间生效？

你已经精准定位了核心问题：当元素在above和below状态之间直接切换时，不必要的transform过渡导致了卡顿。我们需要让过渡仅在元素与active状态交互时触发，其他场景直接切换样式无过渡。

下面是一个可行的方案，结合少量JS逻辑控制过渡触发（你已经在用JS切换类名，所以这个改动非常小），配合CSS实现需求：

步骤1：修改CSS样式 #

我们将过渡样式从默认的.item中移除，改为通过一个临时的.transition类来控制过渡是否生效：

.wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }
.item { 
  position: fixed; 
  top: 0; left: 0; right: 0; bottom: 0; 
  will-change: transform;
  /* 默认无过渡 */
  transition: none; 
}
/* 仅当元素拥有.transition类时，触发过渡 */
.item.transition { 
  transition: transform .8s ease; 
}
.item.above { transform: scale(.8); }
.item.below { transform: translateY(100%); }

步骤2：优化JS类切换逻辑 #

在你更新元素类名的逻辑中，添加判断：仅当类变化涉及active状态时，才给元素添加.transition类，过渡结束后自动移除该类；其他场景直接切换类名，不触发过渡。

假设你原来有一个更新元素类的函数，修改后类似这样：

function updateItemState(item, newState) {
  // 获取元素当前的状态
  const isActive = item.classList.contains('active');
  const isAbove = item.classList.contains('above');
  const isBelow = item.classList.contains('below');

  // 判断是否需要触发过渡：仅当状态变化涉及active时
  const shouldTransition = 
    (isActive && (newState === 'above' || newState === 'below')) ||
    ((isAbove || isBelow) && newState === 'active');

  if (shouldTransition) {
    // 添加过渡类
    item.classList.add('transition');
    // 过渡结束后移除过渡类，避免影响后续状态切换
    item.addEventListener('transitionend', () => {
      item.classList.remove('transition');
    }, { once: true });
  } else {
    // 不需要过渡，确保移除过渡类
    item.classList.remove('transition');
  }

  // 移除旧状态类，添加新状态类
  item.classList.remove('active', 'above', 'below');
  item.classList.add(newState);
}

为什么这个方案有效？ #

• 当元素在active ↔ above或active ↔ below之间切换时，我们给元素加上.transition类，触发transform过渡，完全符合你的需求；
• 当元素在above ↔ below之间直接切换时，不会添加.transition类，元素会立即切换到目标样式，没有过渡动画，避免了卡顿；
• transitionend事件监听确保过渡结束后移除.transition类，不会干扰后续的状态切换逻辑。

额外说明 #

如果你想尽量减少JS逻辑，也可以尝试利用CSS的:has()选择器实现纯CSS方案，但:has()目前在部分旧浏览器（如Firefox旧版本）兼容性有限。上面的JS辅助方案兼容性更好，逻辑也更清晰可控。

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