vue3动画的学习

动画

vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果。

如果我们希望给单元素或者组件实现过渡动画，可以使用transition内置组件来完成动画。

1 基础

1.1 Transition的使用

我们会从下面的案例中发现，vue自动给h2元素添加了动画，这是什么原因呢？

当插入或者删除包含在transition组件中的元素时，vue将会做以下处理：

（1）自动嗅探目标元素是否使用了css过渡或者动画，如果有那么会在恰当的时机添加/删除css类名。

（2）如果transition组件提供了 js钩子函数，那么这些钩子函数将会被在恰当的时机所调用。

（3）如果没有找到js钩子函数并且也没有检测到使用css过渡或者动画，那么DOM插入和删除操作将会被立即执行。

我们会发现在上面使用到了多个class，而事实上vue就是帮助我们在这些class之间来回切换完成的动画。

v-enter-from：定义进入过渡的开始状态。在元素被插入前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中使用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程，时间延迟和曲线函数。

v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效（与此同时v-enter-from被移除），在过渡/动画完成之后移除。

v-leave-from：定义离开过渡的开始状态。在进入过渡结束被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中使用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程，时间延迟和曲线函数。

v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效（与此同时v-leave-from被删除），在过渡/动画完成之后移除。

class的name命名规则如下：

（1）如果我们使用的是一个没有name的transition，那么所有的class是以—作为默认前缀。

（2）如果我们添加了一个name属性，比如， 那么所有的class会以test—开头。

transition过渡简单实现hello word的淡入淡出效果。

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>

    <transition name="why">
      <h2 v-if="isShow">Hello World</h2>
    </transition>
  </div>
</template>

<script>