vue 实现动画下拉

Vue 实现动画下拉效果

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

使用 CSS 过渡

通过 Vue 的 <transition> 组件和 CSS 过渡属性，可以实现平滑的下拉动画效果。

<template>
  <div>
    <button @click="toggleDropdown">Toggle Dropdown</button>
    <transition name="slide">
      <div v-if="isOpen" class="dropdown-content">
        <p>Dropdown Content</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: 100px;
}
.dropdown-content {
  background: #f9f9f9;
  padding: 10px;
}
</style>

使用 CSS 动画

如果需要更复杂的动画效果，可以使用 CSS 动画结合 <transition> 组件。

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

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

<style>
.fade-enter-active {
  animation: fadeIn 0.5s;
}
.fade-leave-active {
  animation: fadeOut 0.5s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}
.dropdown-content {
  background: #f9f9f9;
  padding: 10px;
}
</style>

使用第三方动画库

如果需要更丰富的动画效果，可以结合第三方动画库如 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-if="isOpen" class="dropdown-content">
        <p>Dropdown Content</p>
      </div>
    </transition>
  </div>
</template>

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

<style>
.dropdown-content {
  background: #f9f9f9;
  padding: 10px;
}
</style>

动态高度下拉

如果下拉内容的高度不确定，可以使用 JavaScript 动态计算高度。

<template>
  <div>
    <button @click="toggleDropdown">Toggle Dropdown</button>
    <transition
      @enter="enter"
      @after-enter="afterEnter"
      @leave="leave"
    >
      <div v-if="isOpen" class="dropdown-content" ref="dropdown">
        <p>Dropdown Content</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`;
      });
    },
    afterEnter(el) {
      el.style.height = 'auto';
    },
    leave(el) {
      el.style.height = `${el.scrollHeight}px`;
      setTimeout(() => {
        el.style.height = '0';
      });
    }
  }
};
</script>

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

以上方法可以根据实际需求选择适合的方式实现动画下拉效果。