Collapse折叠组件的过渡动画为什么只在第一次展开时有效？

恩贝酱~ 提问于 2026-02-01 19:17:26 阅读 14

组件

我在用Vue写Collapse折叠组件时，给max-height加了transition，但发现动画只在第一次展开时有效，之后收起和再次展开都变成瞬时切换了。试过把高度设成100%也不行，控制台没报错但效果不对，求大佬帮忙看看哪里漏了？


.collapse-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.collapse-content.active {
  max-height: 1000px; /* 我猜这是问题所在 */
}

现在发现如果手动把max-height的具体像素值改小，有时候又能生效，但这样写太不灵活了。难道是过渡属性没有正确绑定到动态高度吗？

我来解答赞 6 收藏

反馈

1 条解答

爱豪 Lv1

嗯，这个问题确实挺常见的，主要是因为 max-height 的过渡动画需要一个明确的数值范围才能正常工作。你现在的写法中用了 1000px，这确实不够灵活，而且可能导致浏览器无法正确计算动态高度。

更好的写法是通过 JavaScript 动态设置 max-height，这样就能确保每次展开时都用上正确的高度值。下面是一个简单的实现：

methods: {

  toggleCollapse() {

    const content = this.$refs.collapseContent;

    if (content.style.maxHeight) {

      // 收起

      content.style.maxHeight = null;

    } else {

      // 展开

      content.style.maxHeight = ${content.scrollHeight}px;

    }

  }

}

然后在模板里加上引用：

<div

  ref="collapseContent"

  class="collapse-content"

  @click="toggleCollapse">

  内容...

</div>

CSS 部分保持不变：

.collapse-content {

  overflow: hidden;

  max-height: 0;

  transition: max-height 0.3s ease;

}

这样写的好处是：每次展开时都会根据内容的实际高度动态设置 max-height，而不是用固定的 1000px。收起时直接清空 max-height，过渡动画就能一直正常工作了。

顺便说一句，如果不想手写这么多逻辑，也可以考虑用 Vue 的内置 <transition> 组件，结合 v-show 来实现更简洁的折叠效果。不过如果你对控制细节有要求，上面这种方式会更适合。

2026-02-01 19:19