Transition动画为什么只在进入时生效，退出时不触发？

树行酱~ 提问于 2026-02-28 08:15:20 阅读 19

交互

我用CSS写了个简单的过渡效果，想让元素在显示和隐藏时都有淡入淡出动画，但目前只有显示的时候有动画，隐藏时直接消失了，完全没过渡。是不是哪里写错了？

我试过加了opacity和visibility，也确保了类名切换没问题，但退出动画就是不执行。

.fade-enter {
  opacity: 0;
  visibility: hidden;
}
.fade-enter-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.fade-exit {
  opacity: 1;
  visibility: visible;
}
.fade-exit-active {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

CSS动画交互设计

我来解答赞 2 收藏

反馈

1 条解答

司空蒙蒙 Lv1

问题出在 visibility: hidden 会立即生效，元素直接没了，transition 根本没机会跑。

退出动画需要用 transition-delay 让 visibility 延迟生效，等 opacity 动画跑完再隐藏：

.fade-exit-active {

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease, visibility 0s 0.3s;

}

或者更省事，直接用 pointer-events: none 代替 visibility，省得折腾延迟。

2026-02-28 20:02