Vue之过渡动画

一、简介

1、Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果
2、本质上还是使用CSS3动画：transition、animation

二、基本用法

1、使用transition组件，将要执行动画的元素包含在该组件内

<transition>运动的元素</transition>

2、例子 => 点击按钮隐藏和显示div

<style>
    p {
    width: 300px;
    height: 300px;
    background-color: red;
}
</style>
<div id="itany">
    <button @click="flag=!flag">点我</button>
    <p v-show="flag">hello</p>
</div>
<script>
    var vm = new Vue({
        el: '#itany',
        data: {
            flag: false
        },
    });
</script>

3、为显示和隐藏添加效果

<transition name="fade"> // 需要给此组件起一个名字，后续要用到
    <p v-show="flag">hello</p>
</transition>
<style>
    p {
    width: 300px;
    height: 300px;
    background-color: red;
}

.fade-enter-active,.fade-leave-active {
    transition: all 3s ease;
}

.fade-enter-active {
    opacity: 1;
    width: 300px;
    height: 300px;
}

.fade-leave-active {
    opacity: 0;
    width: 50px;
    height: 50px;
}
        /* .fade-enter需要放在.fade-enter-active的后面 */
.fade-enter {
    opacity: 0;
    width: 100px;
    height: 100px;
}
</style>

三、动画出现的不同时机，可以使用钩子函数做某些操作，钩子函数有8个，例5个：

<transition name="fade" 
@before-enter="beforeEnter" 
@enter="enter" 
@after-enter="afterEnter"
@before-leave="beforeLeave" 
@leave="leave" 
@after-leave="afterLeave">
    <p v-show="flag">hello</p>
</transition>

methods: {
    beforeEnter(el) {
        // alert('动画进入之前');
    },
    enter() {
        // alert('动画进入');
    },
    afterEnter(el) {
        // alert('动画进入之后');
        el.style.background = 'blue';
    },
    beforeLeave() {
        // alert('动画即将之前');
    },
    leave() {
        // alert('动画离开');
    },
    afterLeave(el) {
        // alert('动画离开之后');
        el.style.background = 'red';
    }
}

四、结合第三方动画库animate.css一起使用

<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
    <p v-show="flag">hello</p>
</transition>