【无标题】

Vue 系统组件 简介

<Transition>动画过渡组件

注意:

1.编译出错，必需只能包含一个根元素

2.template 不能做为根元素

使用方法

appear: 这是Transition组件的一个属性，指示在初始渲染时是否应用过渡效果。如果设置了 appear，那么元素在初始渲染时也会应用过渡效果。
对于大多数的 CSS 动画，我们只需要简单地在 *enter-active-class 和 *leave-active-class 下声明动态状态。

比如： <Transition appear enter-active-class="animate__animated animate__bounceInRight">

相应的属性和触发的相应方法：:

<Transition
    name = "[String]"
    css = "[Boolean]"
    type = "[transition|animation]"
    duration = "[Number | { enter: number; leave: number }]"
    mode = "[in-out | out-in | default]"
    appear = "[Boolean]"
    enterFromClass = "[String]"
    enterActiveClass = "[String]"
    enterToClass = "[String]"
    appearFromClass = "[String]"
    appearActiveClass = "[String]"
    appearToClass = "[String]"
    leaveFromClass = "[String]"
    leaveActiveClass = "[String]"
    leaveToClass = "[String]"

    @before-enter = [Event]
    @before-leave = [Event]
    @enter = [Event]
    @leave = [Event]
    @appear = [Event]
    @after-enter = [Event]
    @after-leave = [Event]
    @after-appear = [Event]
    @enter-cancelled = [Event]
    @leave-cancelled = [Event]  // 仅仅 v-show 有效
    @appear-cancelled = [Event]    
></Transition>

详解：

通过属性定义过渡效果：（常用于和第三方库集合）： 意思就是class的相关传入样式
一般就是和第三方库进行配合使用
animate 一般不都是直接写class吗 这个是直接进行相拥的传入
*enter-active-class 和 *leave-active-class
这俩就是常用的

写的很好的 https://www.cnblogs.com/wm218/p/16711602.html