Slide up动画渲染异常：点击元素无平滑动画直接消失

点击蓝色背景元素时，预期效果是平滑向上滑动收起，但实际元素直接生硬消失，没有动画效果。即使手动设置max-height简化代码后，问题依然存在。

原代码 #

JS代码：

data: {
  showDiv: true,
  maxHeight: ''
},
methods: {
  async handleClick() {
    await this.$nextTick();
    this.maxHeight = `${this.$refs.divRef?.clientHeight}px`;
    console.log(this.maxHeight);
    this.showDiv = false;
  }
}

HTML代码：

<transition name="slide">
  <div v-if="showDiv" @click="handleClick" ref="divRef" class="content" :style="{ 'max-height': maxHeight }">
    content...
  </div>
</transition>

CSS代码：

.content {
  background: blue;
}

.slide-leave-active {
  animation: slide-up 2s;
}

@keyframes slide-up {
  0% {
    overflow: hidden;
  }

  100% {
    max-height: 0;
  }
}

问题根源 #

1. 元素被立即移除：触发点击后立刻设置showDiv = false，Vue会直接移除元素，动画还没开始执行就结束了。
2. 动画实现方式错误：用animation关键帧处理max-height过渡不合适，这种动态高度的收起应该用transition；而且overflow: hidden放在关键帧里不会生效，必须直接绑定到元素上。
3. 状态切换时机不对：设置maxHeight后立刻隐藏元素，过渡状态没有被Vue的过渡系统捕捉到。

修复方案 #

修复后代码

JS代码：

data: {
  showDiv: true,
  maxHeight: '0'
},
methods: {
  handleClick() {
    // 先设置元素的实际高度，作为过渡的初始状态
    this.maxHeight = `${this.$refs.divRef.clientHeight}px`;
    
    // 等待DOM更新完成后，触发收起过渡
    this.$nextTick(() => {
      this.maxHeight = '0';
      
      // 过渡结束后再隐藏元素，时间要和CSS过渡时长一致
      setTimeout(() => {
        this.showDiv = false;
      }, 2000);
    });
  }
}

HTML代码：

<transition>
  <div v-if="showDiv" @click="handleClick" ref="divRef" class="content" :style="{ 'max-height': maxHeight }">
    content...
  </div>
</transition>

CSS代码：

.content {
  background: blue;
  overflow: hidden; /* 固定隐藏溢出内容，确保收起时内容不外露 */
  transition: max-height 2s ease; /* 用transition实现max-height的平滑过渡 */
}

修复说明

• 用transition替代animation，通过max-height从实际高度到0的变化实现平滑收起效果；
• 调整状态顺序：先让元素显示为实际高度，再触发过渡到0，最后在过渡结束后隐藏元素；
• 将overflow: hidden直接绑定到元素样式，避免收起过程中内容溢出。

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