Vue3动画之内置组件transition的使用

Vue3提供了transition的内置组件，可以给任何元素或组件添加进入/离开的过渡，最常见的有下面三种：

①条件渲染（使用v-if或v-show）
②动态组件
③组件根节点

使用方法：

只要在transition组件中定义好name属性，就可以根据相应的class给包裹的元素或组件添加各种动画样式

比如transition组件的name是fade

vue内部已经给我们自动定义好的类，通过这些类，就可以在css中定义元素进入、离开和过渡状态的样式了。

下面只要把这些类名的第一个横杠之前的英文改成fade

.fade-enter-from：用来定义被fade组件包裹的元素进入开始时的样式

.fade-enter-to：用来定义被fade组件包裹的元素进入结束时的样式

.fade-leave-from：用来定义被fade组件包裹的元素离开开始时的样式

.fade-leave-to：用来定义被fade组件包裹的元素离开结束时的样式

.fade-enter-active：用来定义被fade组件包裹的元素进入过渡时的样式

.fade-leave-active：用来定义被fade组件包裹的元素离开过渡时的样式

下面是一个点击toogle按钮让H2元素在1秒内浮现或渐隐的例子：

template>
  <div>
    <button @click="toogle">toogle</</