当前位置：首页 > VUE

vue动画实现折叠

2026-02-17 01:18:37VUE

使用 Vue Transition 实现折叠动画

在 Vue 中可以通过 <transition> 组件和 CSS 过渡实现折叠效果。核心思路是动态切换元素的高度，从 0 到 auto 或反之。

<template>
  <div>
    <button @click="isOpen = !isOpen">Toggle</button>
    <transition name="fold">
      <div v-show="isOpen" class="content">
        <!-- 内容区域 -->
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    }
  }
}
</script>

<style>
.fold-enter-active, .fold-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.fold-enter-from, .fold-leave-to {
  height: 0;
  opacity: 0;
}

.fold-enter-to, .fold-leave-from {
  height: auto;
  opacity: 1;
}
</style>

使用 CSS Grid 实现平滑过渡

当内容高度不确定时，可以使用 CSS grid 布局实现更平滑的折叠动画：

vue动画实现折叠

.fold-enter-active, .fold-leave-active {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease;
}

.fold-enter-from, .fold-leave-to {
  grid-template-rows: 0fr;
}

.content {
  overflow: hidden;
}

使用 VueUse 的 useTransition 实现

对于更复杂的动画控制，可以使用 VueUse 库的 useTransition：

<template>
  <div :style="{ height: `${height}px` }" class="transition-all overflow-hidden">
    <!-- 内容 -->
  </div>
</template>

<script setup>
import { useTransition } from '@vueuse/core'

const isOpen = ref(false)
const contentRef = ref(null)

const height = useTransition(
  isOpen,
  {
    duration: 300,
    transition: [0.25, 0.1, 0.25, 1]
  }
)
</script>

使用 Collapse 组件库

现有 UI 库如 Element Plus 提供了现成的 Collapse 组件：

vue动画实现折叠

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

<script setup>
const activeNames = ref(['1'])
</script>