《Vue3 七》Vue 中的动画

Vue 提供了一些内置组件和对应的 API 来完成动画，利用它们可以方便地实现动画效果。

<transition> 内置组件：

Vue 提供了 <transition> 内置组件，可以给任意元素或组件添加进入/离开时的动画效果。在条件渲染、动态组件、改变 key 属性时将会触发。

主要针对单个元素或组件。

transition 过渡动画：

<!-- 给 <div> 元素的显示与隐藏添加过渡动画 -->
<template>
  <!-- 2. 使用 <transition> 包裹想要添加动画的元素，Vue 会在恰当的时机将编写好的类自动添加、移除  -->
  <transition>
    <div v-if="isShow">Hello Vue</div>
  </transition>
  <button @click="handleChange">切换</button>
</template>

<script setup>
import {ref} from 'vue'
const isShow = ref(false)
const handleChange = () => {
  isShow.value = !isShow.value
}
</script>

<style scoped>
/* 1. 编写想要的动画的类 */
/* 进入前的状态 */
.v-enter-from, 
/* 离开后的状态 */
.v-leave-to {
  opacity: 0;
}

/* 进入后的状态  */
.v-enter-to,
/* 离开前的状态 */
.v-leave-from {
  opacity: 1;
}

/* 进入时的效果 */
.v-enter-active,
/* 离开时的效果 */
.v-leave-active {
  transition: opacity 1s ease;
}
</style>  

animation 序列帧动画：

<!-- 给 <div> 元素的显示与隐藏添加 animation 动画 -->
<template>
  <!-- 2. 使用 <transition> 包裹想要添加动画的元素，Vue 会在恰当的时机将编写好的类自动添加、移除  -->
  <transition>
    <div v-if="isShow">Hello Vue</div>
  </transition>
  <button @click="handleChange">切换</button>
</template>

<script setup>