vue 实现展开缩放

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

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

通过结合CSS过渡效果和Vue的条件渲染指令，可以实现平滑的展开和缩放动画。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="fade">
      <div v-if="isExpanded" class="content">
        This content will expand and collapse smoothly.
      </div>
    </transition>
  </div>
</template>

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

<style>
.fade-enter-active, .fade-leave-active {
  transition: all 0.5s ease;
  max-height: 1000px;
  overflow: hidden;
}

.fade-enter, .fade-leave-to {
  max-height: 0;
  opacity: 0;
}

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

使用动态绑定样式

通过动态绑定元素的height或max-height属性，可以实现更灵活的展开和缩放效果。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div 
      class="content" 
      :style="{ maxHeight: isExpanded ? '1000px' : '0' }"
    >
      This content will expand and collapse based on max-height.
    </div>
  </div>
</template>

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

<style>
.content {
  transition: max-height 0.5s ease;
  overflow: hidden;
  background: #f0f0f0;
  padding: 10px;
  margin-top: 10px;
}
</style>

使用第三方动画库（如Vue Transition或Animate.css）

借助第三方动画库可以快速实现更复杂的展开和缩放效果。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__fadeOutUp"
    >
      <div v-if="isExpanded" class="content">
        This content uses Animate.css for animations.
      </div>
    </transition>
  </div>
</template>

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

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

使用Vue的<transition-group>实现列表展开和缩放

如果需要展开或缩放多个元素，可以使用<transition-group>。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition-group name="list" tag="div">
      <div v-if="isExpanded" class="content" key="1">
        Item 1
      </div>
      <div v-if="isExpanded" class="content" key="2">
        Item 2
      </div>
    </transition-group>
  </div>
</template>

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

<style>
.list-enter-active, .list-leave-active {
  transition: all 0.5s ease;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

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

使用Vue的<transition>与JavaScript钩子

通过JavaScript钩子可以更精细地控制动画行为。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <div v-if="isExpanded" class="content">
        This content uses JavaScript hooks for animation.
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false
    };
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded;
    },
    beforeEnter(el) {
      el.style.opacity = 0;
      el.style.maxHeight = '0';
    },
    enter(el, done) {
      setTimeout(() => {
        el.style.opacity = 1;
        el.style.maxHeight = '1000px';
        done();
      }, 300);
    },
    leave(el, done) {
      setTimeout(() => {
        el.style.opacity = 0;
        el.style.maxHeight = '0';
        done();
      }, 300);
    }
  }
};
</script>

<style>
.content {
  transition: all 0.5s ease;
  overflow: hidden;
  background: #f0f0f0;
  padding: 10px;
  margin-top: 10px;
}
</style>

以上方法可以根据具体需求选择适合的方式实现展开和缩放效果。