当前位置：首页 > VUE

vue 实现动画下拉

2026-02-23 10:04:29VUE

Vue 实现动画下拉效果

在Vue中实现动画下拉效果，可以通过结合CSS过渡或动画以及Vue的<transition>组件来完成。以下是几种常见的实现方式：

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

通过Vue的v-show或v-if控制下拉内容的显示与隐藏，同时使用CSS过渡实现动画效果。

vue 实现动画下拉

<template>
  <div>
    <button @click="toggleDropdown">Toggle Dropdown</button>
    <transition name="slide">
      <div v-show="isOpen" class="dropdown-content">
        <p>Dropdown content here</p>
      </div>
    </transition>
  </div>
</template>

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

<style>
.slide-enter-active, .slide-leave-active {
  transition: max-height 0.5s ease;
}
.slide-enter, .slide-leave-to {
  max-height: 0;
  overflow: hidden;
}
.slide-enter-to, .slide-leave {
  max-height: 200px;
}
.dropdown-content {
  background: #f9f9f9;
  padding: 10px;
}
</style>

使用Vue的`<transition>`和CSS动画

通过CSS动画实现更复杂的效果，例如淡入淡出或缩放。

vue 实现动画下拉

<template>
  <div>
    <button @click="toggleDropdown">Toggle Dropdown</button>
    <transition name="fade">
      <div v-show="isOpen" class="dropdown-content">
        <p>Dropdown content here</p>
      </div>
    </transition>
  </div>
</template>

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

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
.dropdown-content {
  background: #f9f9f9;
  padding: 10px;
}
</style>

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

结合Animate.css可以快速实现丰富的动画效果。

<template>
  <div>
    <button @click="toggleDropdown">Toggle Dropdown</button>
    <transition
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__fadeOutUp"
    >
      <div v-show="isOpen" class="dropdown-content">
        <p>Dropdown content here</p>
      </div>
    </transition>
  </div>
</template>

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

<style>
@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";
.dropdown-content {
  background: #f9f9f9;
  padding: 10px;
}
</style>

动态高度过渡

如果需要动态高度的下拉内容（内容高度不确定），可以通过JavaScript计算高度并应用过渡。

<template>
  <div>
    <button @click="toggleDropdown">Toggle Dropdown</button>
    <transition @enter="enter" @leave="leave">
      <div v-show="isOpen" class="dropdown-content" ref="dropdown">
        <p>Dropdown content here</p>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
    enter(el) {
      el.style.height = 'auto';
      const height = el.scrollHeight;
      el.style.height = '0';
      setTimeout(() => {
        el.style.height = `${height}px`;
      });
    },
    leave(el) {
      el.style.height = `${el.scrollHeight}px`;
      setTimeout(() => {
        el.style.height = '0';
      });
    }
  }
};
</script>

<style>
.dropdown-content {
  overflow: hidden;
  transition: height 0.5s ease;
  background: #f9f9f9;
  padding: 10px;
}
</style>