vue3 component 动画

Vue3 中的组件动画通常通过 Vue 自带的 `v-bind:class` 和 `transition` 或者第三方库如 Vuetify、Quasar 或者使用更现代化的 CSS-in-JS 方案（如 `vue-animate`）以及 Composition API 的 `ref` 和 `watch` 来实现。

1. **CSS 动画**: 使用内置的 `v-bind:class` 绑定动态的 CSS 类名，结合 `transition` 或 `v-enter`, `v-leave-to` 等修饰符可以控制元素进入、离开动画效果。例如：

<template>
  <div v-enter="enterClass" v-leave="leaveClass" class="my-component">
    <!-- 元素内容 -->
  </div>
</template>

<script setup>
import { ref } from 'vue';

const entering = ref(false);

// 动画状态改变后的函数
const enterClass = () => (entering.value = true);
const leaveClass = () => (entering.value = false);
</script>

<style scoped>
.my-component {
  transition: opacity 0.5s;
}

.my-component.entering {
  opacity: 0;
}

.my-component.exited {
  opacity: 1;
}
</style>

2. **过渡组件（Transition Component）**: 如果需要更复杂的动画效果，可以创建自定义的过渡组件，使用 `<transition>` 标签包裹要过渡的内容。

3. **第三方库**：Vuetify 提供了丰富的 UI 组件和动画解决方案，而 Quasar 则提供了一整套响应式动画工具。