如何在VueJS中实现div高度平滑过渡至0？

你遇到的核心问题主要有两个：

1. CSS过渡不支持从auto到固定值的动画：你的div默认高度是auto（由内部内容撑开），而CSS过渡无法计算auto到0的中间状态，所以直接设置height: 0不会触发动画效果——只有opacity这种有明确数值变化的属性能正常生效。
2. 初始高度未明确指定：即使你添加了过渡类，元素没有一个确定的初始高度值，浏览器不知道该从哪个基准值开始计算过渡动画。

另外补充一点：在Vue中用document.getElementById不是最佳实践，建议用Vue的ref来获取元素，更贴合框架的响应式逻辑。

下面给你两种可行的实现方式，按需选择：

方式一：用max-height模拟高度过渡（最简单） #

这种方法不需要计算元素实际高度，只要给max-height设置一个足够覆盖内容的初始值，再过渡到0，配合overflow: hidden就能模拟出高度收缩的动画效果：

<template>
  <div 
    v-if="props.state == 2" 
    ref="alertRef"
    class="w-full bg-[#E7685D] text-black text-2xl overflow-hidden transition-all duration-500 ease-in-out max-h-[100px]"
  >
    <p class="text-center p-2">text</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps({ state: String })
const alertRef = ref(null)

onMounted(() => {
  setTimeout(() => {
    // 通过添加类来修改max-height，触发过渡
    alertRef.value.classList.add('max-h-0')
  }, 5000)
})
</script>

注意：max-h-[100px]的数值可以根据你的实际内容调整，只要比元素的实际高度大即可，这样过渡效果会更自然。

方式二：获取实际高度后精准过渡（适合高度不确定的场景） #

如果你需要完全精准的高度过渡，可以先获取元素的实际渲染高度，设置为初始行内样式，再过渡到0：

<template>
  <div 
    v-if="props.state == 2" 
    ref="alertRef"
    class="w-full bg-[#E7685D] text-black text-2xl overflow-hidden transition-all duration-500 ease-in-out"
  >
    <p class="text-center p-2">text</p>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
const props = defineProps({ state: String })
const alertRef = ref(null)

onMounted(async () => {
  // 等待DOM完全渲染，确保能获取到正确的高度
  await nextTick()
  const alertEl = alertRef.value
  // 获取元素的实际高度并设置为初始值
  const actualHeight = alertEl.offsetHeight + 'px'
  alertEl.style.height = actualHeight
  
  setTimeout(() => {
    alertEl.style.height = '0'
    // 动画结束后可以设置display: none避免占用空间（可选）
    setTimeout(() => {
      alertEl.style.display = 'none'
    }, 500)
  }, 5000)
})
</script>

这里用nextTick确保DOM完全渲染后再获取高度，给元素一个明确的初始高度值，这样浏览器就能计算出从该高度到0的中间动画状态了。

• 尽量避免直接操作DOM，用Vue的ref获取元素更符合框架的响应式设计。
• 如果你只想针对height属性做过渡，可以把transition-all换成transition-height（Tailwind v3及以上版本支持）。

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