当前位置：首页 > VUE

vue实现折叠动画功能

2026-02-24 03:29:05VUE

使用 Vue Transition 实现折叠动画

Vue 的 <transition> 组件可以方便地实现元素的展开和折叠动画。通过 CSS 过渡或动画控制高度变化。

<template>
  <div>
    <button @click="isExpanded = !isExpanded">Toggle</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
    >
      <div v-if="isExpanded" class="content">
        <!-- 内容 -->
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.height = '0'
    },
    enter(el) {
      el.style.height = `${el.scrollHeight}px`
    },
    afterEnter(el) {
      el.style.height = 'auto'
    },
    beforeLeave(el) {
      el.style.height = `${el.scrollHeight}px`
    },
    leave(el) {
      setTimeout(() => {
        el.style.height = '0'
      })
    },
    afterLeave(el) {
      el.style.height = '0'
    }
  }
}
</script>

<style>
.content {
  overflow: hidden;
  transition: height 0.3s ease;
}
</style>

使用 Vue Transition + CSS 动画

另一种方式是直接使用 CSS 动画，通过定义关键帧来实现更复杂的折叠效果。

<template>
  <div>
    <button @click="isExpanded = !isExpanded">Toggle</button>
    <transition name="fold">
      <div v-if="isExpanded" class="content">
        <!-- 内容 -->
      </div>
    </transition>
  </div>
</template>

<style>
.fold-enter-active, .fold-leave-active {
  transition: all 0.3s;
  max-height: 1000px;
}
.fold-enter, .fold-leave-to {
  opacity: 0;
  max-height: 0;
}
.content {
  overflow: hidden;
}
</style>

使用第三方库 vue-collapse-transition

对于更简单的实现，可以使用专门为 Vue 设计的折叠动画库 vue-collapse-transition。

安装：

npm install vue-collapse-transition

使用：

<template>
  <div>
    <button @click="isExpanded = !isExpanded">Toggle</button>
    <collapse-transition>
      <div v-if="isExpanded" class="content">
        <!-- 内容 -->
      </div>
    </collapse-transition>
  </div>
</template>

<script>
import { CollapseTransition } from 'vue-collapse-transition'

export default {
  components: {
    CollapseTransition
  },
  data() {
    return {
      isExpanded: false
    }
  }
}
</script>