vue 过渡动画

过渡动画

1.简介

vue在插入、更新或者移除DOM的时候，提供了多种不同方式的应用过渡动画
本质上还是使用css3动画：transition，animation

2.基本用法

使用transition组件，将要执行动画的元素包含在该组件内
<transition>
    <p>执行动画的元素</p>
</transition>

3.过渡动画内钩子函数

• v-on:before-enter=“beforeEnter” ===> 动画进入之前
• v-on:enter=“enter” ===> 动画进入中
• v-on:after-enter=“afterEnter” ===> 动画进入之后
• v-on:before-leave=“beforeLeave” ===> 动画离开之前
• v-on:leave=“leave” ===> 动画离开中
• v-on:after-leave=“afterLeave” ===> 动画离开之后

    html用法：
    <transition 
        /* 钩子函数调用方法 */
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:after-enter="afterEnter"
        v-on:before-leave="beforeLeave"
        v-on:leave="leave"
        v-on:after-leave="afterLeave"

        /* 自定义过渡动画css行业写法 */
        enter-active-cla