当前位置：首页 > VUE

vue动画实现折叠

2026-01-16 00:02:13VUE

使用 Vue Transition 实现折叠动画

在 Vue 中可以通过 <transition> 组件和 CSS 过渡实现折叠效果。核心原理是动态切换元素的 height 属性，配合 overflow: hidden 实现平滑的展开/折叠动画。

<template>
  <div>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '折叠' : '展开' }}
    </button>

    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @before-leave="beforeLeave"
      @leave="leave"
    >
      <div v-show="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'
      })
    }
  }
}
</script>

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

使用 Vue 组件库实现

主流 UI 库如 Element UI、Ant Design Vue 都提供现成的折叠面板组件：

vue动画实现折叠

Element UI Collapse

vue动画实现折叠

<el-collapse v-model="activeNames">
  <el-collapse-item title="标题" name="1">
    内容区域
  </el-collapse-item>
</el-collapse>

Ant Design Vue Collapse

<a-collapse v-model:activeKey="activeKey">
  <a-collapse-panel key="1" header="标题">
    内容区域
  </a-collapse-panel>
</a-collapse>

使用 CSS Grid 实现高级折叠

对于更复杂的布局，可以结合 CSS Grid 实现：

<template>
  <div class="grid-container" :style="{ gridTemplateRows: gridRows }">
    <div class="header" @click="toggle">标题</div>
    <div class="content">
      内容区域
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false
    }
  },
  computed: {
    gridRows() {
      return this.isExpanded ? 'auto 1fr' : 'auto 0fr'
    }
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

<style>
.grid-container {
  display: grid;
  transition: grid-template-rows 0.3s ease;
  overflow: hidden;
}
.content {
  overflow: hidden;
}
</style>