Vue Collapse组件展开时为什么动画不生效？

首先你要明白这个问题出在CSS过渡动画的基本原理上。你用的是transition-group，但其实对于单个元素的显隐控制，应该用transition而不是transition-group。transition-group是专门用来处理列表增删、排序这类多个子元素场景的，你现在只有一个div在切换显示隐藏，完全没必要用group。

不过更关键的问题不在这里，而是你的CSS写法有根本性错误。你想对height做过渡动画，但初始状态的高度是多少？当元素从无到有时，enter阶段开始的时候，浏览器需要知道从什么值过渡到什么值。你在collapse-enter里写了height: 0，但没写起始高度啊！而且最关键的是——元素的真实内容高度是动态的，你不能靠transition自动计算这个变化。

我来一步步告诉你怎么解决：

第一，把transition-group换成transition标签。这是最基本的修正

第二，要用Vue的transition钩子配合JS来手动控制高度过渡。因为CSS transition没法自动计算"从0到auto"这种变化，必须通过JavaScript先测量目标高度再触发动画。

第三，利用Vue的enter和leave钩子函数，在节点插入前获取其自然高度，然后做动画。

下面是能工作的完整代码示例：

<template>

  <div>

    <button @click="isOpen = !isOpen">Toggle</button>

    <!-- 使用transition，并绑定三个JS钩子 -->

    <transition

      name="collapse"

      @before-enter="beforeEnter"

      @enter="enter"

      @after-enter="afterEnter"

      @before-leave="beforeLeave"

      @leave="leave"

      @after-leave="afterLeave"

    >

      <div v-if="isOpen" class="content">

        这里有很多文字内容

        <br>随便加几行让内容变高一点

        <br>方便看出动画效果

      </div>

    </transition>

  </div>

</template>



<script>

export default {

  data() {

    return {

      isOpen: false

    }

  },

  methods: {

    // 进入前：设置初始状态（高度为0）

    beforeEnter(el) {

      el.style.height = '0'

      el.style.overflow = 'hidden'

    },

    

    // 开始进入：开启过渡，设置目标高度

    enter(el, done) {

      // 必须等样式应用后再读取scrollHeight，所以用$nextTick或setTimeout

      this.$nextTick(() => {

        // scrollHeight是元素内容的实际高度，包括被overflow隐藏的部分

        const targetHeight = el.scrollHeight + 'px'

        el.style.height = targetHeight

      })

      // 监听transition结束事件，完成后调用done()

      el.addEventListener('transitionend', done, { once: true })

    },



    // 进入结束后：清除内联样式，避免影响后续布局

    afterEnter(el) {

      el.style.height = '' // 清空，让CSS决定最终高度

    },



    // 离开前：设置初始状态（当前高度）

    beforeLeave(el) {

      // 先设成固定高度，否则会瞬间跳到0

      el.style.height = el.scrollHeight + 'px'

      el.style.overflow = 'hidden'

    },



    // 开始离开：过渡到0

    leave(el, done) {

      // 触发重绘后立即设置为0，形成动画

      el.offsetHeight // 强制重绘，这一步很重要！

      el.style.height = '0'

      el.addEventListener('transitionend', done, { once: true })

    },



    // 离开结束后：不用做啥，v-if会移除元素

    afterLeave(el) {

      el.style.height = ''

    }

  }

}

</script>



<style>

/* 只需要定义过渡属性，不需要写具体类名 */

.collapse-enter-active,

.collapse-leave-active {

  transition: height 0.3s ease;

}

/* 注意：我们不再使用.collapse-enter这类类名了，

   因为我们用JS钩子直接操作style */

</style>

你看，核心思路就是：用JS先拿到内容的真实高度（scrollHeight），然后通过内联样式把height从0变成那个具体数值，这样浏览器就知道怎么过渡了。反之亦然。

如果你不想写这么多钩子，也有现成的方案。比如可以用animate.css配合height: auto的hack，但那些都不够可靠。或者你可以直接引入element-plus、view-ui这些UI库里的collapse组件看看源码实现，它们底层也是这么干的。

另外提一句，很多人踩坑是因为以为transition能自动处理height: auto的动画，但实际上所有现代浏览器都不支持从"0"到"auto"的过渡，只能是从"0"到"100px"这种确定值之间的过渡。这就是为什么必须用JS测量的原因。

你现在把这个代码跑起来，展开和收起都会有平滑的高度动画了。要是还不行，检查下.content有没有padding或者margin导致高度计算偏差，可以统一用padding-box盒模型来算。

用 transition-group 是错的，你这是单个元素的显隐，不是列表。改一下就行，换成 transition 标签。

而且 height 动画不能 auto，浏览器没法计算从 0 到 auto 的过程。得用 max-height 模拟，或者 JS 配合获取真实高度。

直接上能用的代码：

<template>

  <div>

    <button @click="isOpen = !isOpen">Toggle</button>

    <transition name="collapse">

      <div v-if="isOpen" class="content">

        这里有很多文字内容

      </div>

    </transition>

  </div>

</template>



<style>

.collapse-enter-active, .collapse-leave-active {

  transition: all 0.3s ease;

}

.collapse-enter-from { opacity: 0; transform: translateY(-10px); }

.collapse-leave-to { opacity: 0; transform: translateY(-10px); }

</style>

如果你非要用 height 动画，那得 JS 拿 offsetHeight，用动态 style.height 控制，配合 transition: height 0.3s ease 才行。但一般人没必要这么折腾，上面这个方案够用了。