vue 实现展开缩放

在 Vue 中实现展开/缩放效果可以通过动态 CSS 类、过渡动画或第三方库实现。以下是几种常见方法：

使用动态 Class 控制高度

通过绑定 class 或 style 切换元素高度，结合 CSS 过渡实现平滑效果：

<template>
  <div>
    <button @click="toggle">展开/收起</button>
    <div 
      class="content" 
      :style="{ height: isExpanded ? 'auto' : '0px' }"
    >
      这里是需要展开的内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { isExpanded: false }
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

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

结合 Vue Transition 组件

利用 Vue 内置的 <transition> 实现更复杂的动画效果：

<template>
  <div>
    <button @click="toggle">切换</button>
    <transition name="slide">
      <div v-if="isExpanded" class="content">
        过渡动画内容
      </div>
    </transition>
  </div>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: max-height 0.5s ease;
}
.slide-enter-from, .slide-leave-to {
  max-height: 0;
}
.slide-enter-to, .slide-leave-from {
  max-height: 500px;
}
</style>

使用第三方动画库（如 GSAP）

通过 GSAP 实现精细控制的缩放动画：

<template>
  <div ref="box" class="box" @click="toggle"></div>
</template>

<script>
import gsap from 'gsap'
export default {
  methods: {
    toggle() {
      gsap.to(this.$refs.box, {
        scale: this.isExpanded ? 1 : 0.5,
        duration: 0.5
      })
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

关键注意事项

• 使用 max-height 替代 height 可以避免内容高度不确定的问题
• 动画性能优化建议使用 transform 和 opacity 属性
• 移动端考虑添加 will-change: transform 提升渲染性能
• 复杂场景可考虑使用 VueUse 的 useTransition 组合式函数

以上方法可根据实际需求组合使用，CSS 方案适合简单交互，GSAP 适合复杂动画序列。