Vue 组件动画效果

You:

有没有什么库可以实现组件变幻的动画效果比如淡入淡出

ChatGPT:

当然有！如果你想要在 Vue 项目中实现组件的淡入淡出、滑动、缩放等动画过渡效果，有几个非常推荐的方式或库可以实现，简单又漂亮👇

✅ 方式一：Vue 内建 `<Transition>`（最简）

Vue 自带的 <Transition> 组件就支持基本动画，比如淡入淡出：

<template>
  <button @click="show = !show">切换</button>
  <Transition name="fade">
    <div v-if="show" class="p-4 bg-blue-200">Hello</div>
  </Transition>
</template>

<script setup>
import { ref } from "vue";
const show = ref(true);
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

✅ 方式二：使用 Tailwind CSS 的动画类（简单强大）

如果你已经用了 Tailwind，可以搭配 transition, duration, opacity, transform 等类：

<template>
  <button @click="show = !show">切换</button>
  <div
    v-if="show"
    class="transition-opacity duration-500 ease-in-out opacity-100"
    :class="{ 'opacity-0': !show }"
  >
    Hello with Tailwind
  </div>
</template>

✅ 方式三：使用 VueUse 的动画类（组合式动画工具）

如果你用组合式 API 并喜欢封装好的 hooks，可以考虑 VueUse 提供的一些工具，比如 useTransition()。

✅ 方式四：使用 `motion` 动画库（更酷的动效）

@vueuse/motion 是基于 Popmotion 的 Vue 动画库，写法类似 Framer Motion（React）：

1	npm install @vueuse/motion

<script setup>
import { useMotion } from '@vueuse/motion';
import { ref } from 'vue';

const show = ref(true);
</script>

<template>
  <button @click="show = !show">切换</button>

  <motion
    v-if="show"
    :initial="{ opacity: 0, y: -20 }"
    :enter="{ opacity: 1, y: 0 }"
    :leave="{ opacity: 0, y: 20 }"
    class="p-4 bg-green-200"
  >
    动画组件
  </motion>
</template>