当前位置：首页 > VUE

vue 实现展开缩放

2026-03-09 09:45:12VUE

实现展开/缩放效果的方法

在Vue中实现展开和缩放效果可以通过多种方式完成，以下是几种常见的实现方法：

使用CSS过渡和Vue的v-show或v-if指令

通过Vue的条件渲染指令结合CSS过渡效果实现平滑的展开和缩放动画。定义一个控制展开状态的变量，通过点击事件切换状态。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="expand">
      <div v-show="isExpanded" class="content">
        Content to be expanded or collapsed
      </div>
    </transition>
  </div>
</template>

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

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

.expand-enter, .expand-leave-to {
  height: 0;
  opacity: 0;
  padding: 0 10px;
}

.content {
  height: auto;
  padding: 10px;
  background: #f0f0f0;
}
</style>

使用Vue的transition组件实现动画

利用Vue内置的transition组件可以创建更复杂的动画效果，包括缩放变换。

<template>
  <div>
    <button @click="isExpanded = !isExpanded">Toggle Scale</button>
    <transition name="scale">
      <div v-if="isExpanded" class="box"></div>
    </transition>
  </div>
</template>

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

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #42b983;
  margin: 20px auto;
}

.scale-enter-active, .scale-leave-active {
  transition: all 0.5s ease;
}

.scale-enter, .scale-leave-to {
  transform: scale(0);
  opacity: 0;
}
</style>

使用第三方动画库

对于更复杂的动画需求，可以考虑使用第三方动画库如Animate.css或GSAP。

<template>
  <div>
    <button @click="isExpanded = !isExpanded">Toggle</button>
    <transition
      enter-active-class="animate__animated animate__zoomIn"
      leave-active-class="animate__animated animate__zoomOut"
    >
      <div v-if="isExpanded" class="content">
        Content with zoom animation
      </div>
    </transition>
  </div>
</template>

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

<style>
@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";

.content {
  padding: 20px;
  background: #f0f0f0;
  margin-top: 10px;
}
</style>

动态绑定样式实现缩放

通过动态绑定style属性，直接控制元素的transform属性实现缩放效果。

vue 实现展开缩放

<template>
  <div>
    <button @click="toggleScale">Toggle Scale</button>
    <div 
      class="box" 
      :style="{ transform: `scale(${scale})` }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scale: 1
    }
  },
  methods: {
    toggleScale() {
      this.scale = this.scale === 1 ? 0.5 : 1
    }
  }
}
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #42b983;
  margin: 20px auto;
  transition: transform 0.3s ease;
}
</style>

以上方法可以根据具体需求选择使用，CSS过渡适合简单的展开/收起效果，而第三方动画库则能提供更丰富的动画效果。