Vue $nextTick && 过度与动画

# $nextTick
#     1.语法： this.$nextTick(回调函数);
#     2.作用：在下一次DOM更新结束后执行其指定的回调。
#     3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作是，要在nextTick所指定的回调函数中执行。
#     
# Vue 封装的过度与动画
#     1.作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名
#     2.写法：
#         a.准备好样式：
#             .元素进入的样式
#                 v-enter：进入的起点
#                 v-enter-active：进入过程中
#                 v-enter-to：进入的终点
#             .元素离开的样式
#                 v-leave：离开的起点
#                 v-leave-active：离开过程中
#                 v-leave-to：离开的终点
#         b.使用<transition>包裹要过度的元素，并配置name属性：
             <transition name="hello">
                 <h1 v-show="isShow">hello!</h1>
            </transition>
#         c.备注：若有多个元素需要过度，则需要使用：<transition-group>,且每个元素都要指定key值。

 

Vue封装的过度与动画
<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition name="hello" :appear="true">
            <h1 v-show="isShow">你好啊！</h1>
        </transition>
    </div>
</template>

<script>
export default {
    name: 'Test',
    data(){
        return {
            isShow: true
        }
    }
}
</script>
<style scoped>
    h1{
        background-color: orange;
    }
    .hello-enter-active{
        animation: chad 0.5s linear;
    }
    .hello-leave-active{
        animation: chad 0.5s linear reverse;
    }

    @keyframes chad {
        from{
            /* transform: translateX(-100px); */
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>

 

transition-group
<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition name="hello" :appear="true">
            <h1 v-show="isShow">你好啊！!</h1>
        </transition>
        <transition-group name="hello" :appear="true">
            <h1 v-show="isShow" key="1">你好啊！!!!</h1>
            <h1 v-show="isShow" key="2">你好啊！!!</h1>
        </transition-group>
    </div>
</template>

<script>
export default {
    name: 'Test2',
    data(){
        return {
            isShow: true
        }
    }
}
</script>
<style scoped>
    h1{
        background-color: orange;
    }
    /* 进入的起点、离开的终点 */
    .hello-enter, .hello-leave-to{
        transform: translateX(-100%);
    }
    /* 正在进入起点、正在离开起点 */
    .hello-enter-active, .hello-leave-active{
        transition: 0.5s linear;
    }
    /* 进入的终点、离开的起点 */
    .hello-enter-to, .hello-leave{
        transform: translateX(0);
    }

    @keyframes chad {
        from{
            /* transform: translateX(-100px); */
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>

 

第三方动画效果样式库：animate.css
<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition-group
            appear
            name="animate__animated animate__bounce"
            enter-active-class="animate__bounceIn"
            leave-active-class="animate__bounceOut"
        >
            <h1 v-show="isShow" key="1" class="animate__animated animate__bounce">你好啊！!</h1>
        </transition-group>
    </div>
</template>

<script>
import 'animate.css';// 第三方库   https://animate.style/
export default {
    name: 'Test3',
    data(){
        return {
            isShow: true
        }
    }
}
</script>
<style scoped>
    h1{
        background-color: orange;
        animation-duration: 0.5s; /* don't forget to set a duration! */
    }
    
</style>