把需要展示动画效果的标签用transition标签包裹

<transition>里面只能使一个子元素使用动画
</transition>

<transition-group>  里面能使多个子元素使用一样的动画
</transition-group>

transition属性：name   作用于取代类名的前缀v       应用地方：一个页面多个不同的动画
          属性：appear 作用 页面加载后立即执行入场动画
在样式里面配置改标签的入场跟离场的动画
类名：
.v-enter-active{  入场
}
.v-leave-active{  离场
}

还有两个类名，需用过渡时使用
.v-enter 入场的起点
.v-enter-to  入场的终点

.v-leave  离场的起点
.v-leave-to  离场的终点

集成第三方动画库

npm 里面有一个animate.css

然后在<transition>添加属性
 例子：
<transition name = "animate__animated animate__bounce"
    appear
    enter-active-class="animate__bounce"  入场动画
    leave-active-class="animate__backOutDown"   离场动画
>
</transition>