Vue——动画

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        /* v-if="true" 进入动画之前 入场的一个初始化 */
        .slide-enter{
            opacity: 0;
        }
        /* 进入的一个过渡 */
        .slide-enter-active{
            transition: opacity 3s linear;
        }
        /* 进入到什么状态  */
        .fade-enter-to {
            opacity: 1;
        }
        /* v-if="false" 离开动画之前 出场的一个初始化 */
        .slide-leave{
            opacity: 1;
        }
        /*定义离开的过渡*/
        .slide-leave-active{
            transition: opacity 2s linear;
        }
        /* 离开到什么状态 */
        .slide-leave-to{
            opacity: 0;
        }
</style>

<script>
    new Vue({
        el:'#app',
        data:{
            show:true
        },
        template:`
            <div class='app'>
                <transition name='slide'>
                    <div class='box' v-if='show'>
                    </div>
                </transition>
                <button @click="show=!show">开关</button>
            </div>
        `,
    })
</script>

动画钩子函数

<style>
    .box{
        width: 300px;
        height: 300px;
        background: red;
    }
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    @keyframes fadeOut {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }
    .fadeIn {
        animation: fadeIn 5s linear;
    }
    .fadeOut {
        animation: fadeOut 5s linear;
    }
    .fade {
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
    }
</style>

<script>
    new Vue({
        el: '#ap',
        template: `
            <div class="app">
                <transition
                    enter-active-class="fade fadeInLeft"
                    leave-active-class="fade fadeOutLeft"
                    @before-enter="beforeEnter"
                    @enter="enter"
                    @after-enter="afterEnter"
                    @enter-cancelled="enterCancelled"

                    @before-leave="beforeLeave"
                    @leave="leave"
                    @after-leave="afterLeave"
                    @leave-cancelled="leaveCancelled"
                    >
                    <div class="box" v-if="show">

                    </div>
                </transition>

                <button @click="show =!show">开关</button>    
            </div>
        `,
        methods: {
            beforeEnter(){
                // 进入之前
                console.log('动画进入之前')
            },
            enter(){
                console.log('动画进入时')
            },
            afterEnter(){
                console.log('动画进入后')
            },
            enterCancelled(){
                // 在动画还未完成时 取消动画该钩子就会运行
                console.log('进入动画取消')
            },
            beforeLeave() {
                console.log('动画离开前')
            },
            leave() {
                console.log('动画离开时')
            },
            afterLeave() {
                console.log('离开后')
            },
            leaveCancelled(){
                console.log('离开动画取消')
            },
        },
        data: {
            show: true
        }
    })
</script>