Vue过渡仅生效于元素显示，隐藏时无动画问题排查

点击按钮通过Vue过渡实现元素的显示/隐藏，目标是模拟jQuery的slideDown()和slideUp()动画效果。目前元素显示时动画正常，但隐藏时完全没有动画效果，CSS过渡失效。

.slide-enter-active,
.slide-leave-active {
  transition: 2s;
}
  
.slide-enter-to {
   max-height: 500px;
   overflow: hidden;
}

.slide-enter-from,
.slide-leave-to {
  overflow: hidden;
  max-height: 0;
}

核心问题 #

隐藏动画失效的关键原因：元素在正常显示状态下没有设置max-height和overflow属性。Vue的leave过渡需要从一个具体的数值型max-height过渡到0，但如果元素默认状态下max-height是浏览器默认的auto，浏览器无法计算auto到0的过渡动画，会直接让元素瞬间隐藏，看不到动画。
另外，原代码的transition没有明确指定过渡属性，可能导致不必要的属性参与过渡，也会影响动画表现。

修正后的CSS代码 #

/* 给元素默认显示状态设置基础样式，保证leave过渡有初始值 */
.slide-content {
  max-height: 500px; /* 值要足够容纳元素内容，和slide-enter-to保持一致 */
  overflow: hidden;
}

.slide-enter-active,
.slide-leave-active {
  transition: max-height 2s ease; /* 明确指定过渡属性为max-height */
}
  
.slide-enter-from,
.slide-leave-to {
  max-height: 0;
}

注意事项 #

1. 确保Vue过渡组件包裹的元素默认添加.slide-content类（或者把这些基础样式直接写在元素的原有类里），保证显示状态下有max-height和overflow。
2. max-height的数值要设置得足够大，能覆盖元素内容的最大高度，避免内容被截断。
3. 不需要在slide-enter-to里重复写overflow: hidden，默认状态已经设置，过渡阶段会继承该属性。

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