CSS过渡问题：添加active类时生效，移除时失效，改用all则恢复正常

先看你写的CSS代码：

.cart-panel{
position:absolute;
top:0;
left:0;
width:100vw;
height:100vh;
z-index:2;
display:flex;
visibility:hidden;
transform:translateX(100%);
transition:transform 0.3s ease-in;
}
.cart-panel.active{
visibility:visible;
transform:translateX(0);
}

问题很明确：添加active类时，transform的过渡动画正常触发；但移除该类时，过渡效果完全没反应。可一旦把transition属性改成all，移除类的过渡就正常了。

核心原因 #

移除active类的瞬间，元素同时发生两个属性变化：

• transform从translateX(0)恢复到translateX(100%)
• visibility从visible变回hidden

你原本只给transform设置了过渡，浏览器会优先执行visibility:hidden——这个属性是瞬间生效、不支持过渡的，元素会直接被隐藏，transform的动画还没来得及播放就看不到了。

当改成transition: all后，浏览器会将所有属性的变化纳入过渡处理逻辑。虽然visibility本身不能过渡，但浏览器会等待transform的0.3秒动画完成后，再执行visibility:hidden，所以你能完整看到元素移出的过渡效果。

更合理的解决办法 #

不要用visibility配合过渡实现显示隐藏，推荐两种方案：

1. 改用opacity（支持过渡）替代visibility，配合transform完成动画
2. 给visibility设置延迟，让它在transform过渡结束后再生效，代码示例：

.cart-panel{
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  z-index:2;
  display:flex;
  visibility:hidden;
  opacity:0;
  transform:translateX(100%);
  /* visibility延迟0.3s（和transform过渡时长一致）再生效 */
  transition: transform 0.3s ease-in, visibility 0s 0.3s, opacity 0.3s ease-in;
}
.cart-panel.active{
  visibility:visible;
  opacity:1;
  transform:translateX(0);
  /* 激活时visibility立即生效 */
  transition: transform 0.3s ease-in, visibility 0s, opacity 0.3s ease-in;
}

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