使用transition标签

在插入、更新或移出DOM元素时，在合适的时候给元素添加样式类名

元素进入的样式：

1. v-enter：进入起点样式
2. v-enter-active：进入过程中
3. v-enter-to：进入的终点

元素离开的样式

1. v-leave：离开的起点
2. v-leave-avtive：离开过程中
3. v-leave-to：离开的终点

使用动画写效果

在transition标签加入appear属性可以直接加载动画，给transition标签创建name属性时样式class名就要变成name值-enter-active

<transition appear name="hello"></transition>
<style>
    /* 进入时激活动画 */
    .hello-enter-active {
        animation: donghua 0.5s linear;
    }
</style>

<transition>
    <h1 v-show="isShow">你好</h1>
</transition>
<style>
    /* 进入时激活动画 */
    .v-enter-active {
        animation: donghua 0.5s linear;
    }
    /* 离开动画 */
    .v-leave-active {
        animation: donghua 0.5s linear reverse;
    }
    @keyframes donghua {
        from {
            transform: translateX(-100%px);
        }
        to {
            transform: translateX(0px);
        }
    }
</style>

使用过度写效果

<transition name="hello" appear>
    <h1 v-show="isShow">你好</h1>
</transition>
<style>
    h1{
        background-color: orange;
        /* 可以写动画的标签里 */
        transition: 0.5s linear; 
    }
    .hello-enter-active,.hello-leave-active{
        /* 也可以写在这里面 */
        transition: 0.5s linear;
    }
    /* 进入起点、离开的终点 */
    .hello-enter,.hello-leave-to{
        transform: translateX(-100%px);
    }
    /* 进入终点、离开的起点 */
    .hello-enter-to,.hello-leave{
        transform: translateX(0px);
    }
</style>

在transition标签里只能使用一个元素，想使用多个元素可以使用transition-group，在使用多个元素动画时需要给动画标签添加key值

<transition name="hello" appear>
    <h1 v-show="isShow">你好</h1>
    <h1 v-show="!isShow">你好</h1>
</transition>

推荐动画库

下载库npm i -S animate.css

网站地址：https://animate.style/

<transition 
    appear 
    name="animate__animated animate__bounce"
    enter-active-class="animate__swing" 
    leave-active-class="animate__backOutUp"
>
    <h1 v-show="isShow">你好</h1>
    <h1 v-show="!isShow">你好</h1>
</transition>
<script>
    import 'animate.css'
</script>