五、Vue动画 ------ 2020-05-07

1、常见的能触发动画的操作及添加动画的方式

1、触发动画的操作:
v-if v-show v-for 路由切换

2、添加动画的方式：
 (1) CSS添加动画：
     animation
     transition
 (2) JS添加动画：
     Vue自带的钩子函数；
     第三方动画库；

2、Vue动画的基本使用：通过添加CSS样式使用

<style>
    .box {
        width: 100px;
        height: 100px;
        background: red;
    }

    /* 进入动画 */
    /* 进入的一瞬间添加的属性 */
    .v-enter {
        background: blue;
    }

    /* v-enter-active 和 v-enter-to 会被同时添加到元素上 */
    .v-enter-active {
        transition: all 2s ease-in;
    }

    .v-enter-to {
        background: black;
    }

    /* 离开动画 */
    /* v-leave 没有实际意义，为了美感而生 */
    .v-leave {}

    .v-leave-active {
        background: yellow;
        transition: all 2s ease-in;
    }

    .v-leave-to {
        background: skyblue;
    }
</style>

<div id="app">
    <button @click="btnClick">点击</button>
    <transition name="">
        <div class="box" v-show="isShow"></div>
    </transition>
</div>

// 如果我们不想使用Vue默认的样式名我们可以通过给 transition添加 name属性修改

3、Vue动画的基本使用：通过JS添加动画

<div id="app">
    <button @click="btnClick">点击</button>
    <transition 
    @before-enter="beforeEnter" 
    @enter="enter" 
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
    >
        <div class="box" v-show="isShow"></div>
    </transition>
</div>

const vm = new Vue({
        el: '#app',
        data: {
            isShow: false
        },
        methods: {
            btnClick() {
                this.isShow = !this.isShow;
            },
            beforeEnter(el) {
                el.style.background = "red";
            },
            enter(el, done) {
                el.style.background = "yellow";
                setTimeout(function () {
                    done(); // 调用 done 方法 才会继续执行 afterEnter
                }, 2000)
                el.addEventListener('transitionend', done)
            },
            afterEnter(el) {
                el.style.background = "blue"
            }
        }
    })

4、结合animate.css使用Vue动画

<div id="app">
    <button @click="btnClick">点击</button>
    <transition>
        <div class="box animated" 
            v-show="isShow" 
            enter-active-class="bounceInLeft" 
            leave-active-class="bounceOutLeft">
        </div>
    </transition>
</div>

// 将动画进入和离开时的class改成第三方库的动画class
enter-active-class="bounceInLeft" 
leave-active-class="bounceOutLeft"