vue动画三种常见实现（代码演示）

动画状态划分：

元素进入的样式：

        1. v-enter：进入的起点

        2. v-enter-active：进入过程中

        3. v-enter-to：进入的终点

元素离开的样式：

        1. v-leave：离开的起点

        2. v-leave-active：离开过程中

        3. v-leave-to：离开的终点

使用<transition>包裹要过度的元素，或者使用<transition-group></transition-group>包裹多个元素

<transition-group></transition-group>包裹的多个元素需要指定key

代码如下：

<template>
    <div class="demo">
        <h1>第一种动画方式</h1>
        <transition name="one" appear> 
            <div v-show="oneShow">手写动画效果one </div>
        </transition>
        <hr>

        <h1>第二种过渡方式实现动画</h1>
        <transition name="two" appear>
            <div v-show="twoShow">动画效果TWO</div>
        </transition>
        <hr>

        <h1>第三种animate.css实现动画</h1>
        <transition-group 
            appear
            name="animate__animated animate__bounce"
            enter-active-class="animate__rubberBand"
			leave-active-class="animate__backOutUp"
        >
            <p key="1" v-show="threeShow" >animate test1</p>
            <p key="2" v-show="threeShow" >animate test Two</p>
        </transition-group>
        <div>
            <button @click="oneShow = ! oneShow">one切换</button> 
            <button @click="twoShow = ! twoShow">two切换</button> 
            <button @click="threeShow = ! threeShow">thress切换</button>
        </div>
    </div>
</template>
<script>
import 'animate.css';
export default {
    name:"TestAnimate",
    data(){
        return {
            oneShow: true,
            twoShow: true,
            threeShow: true,
        }
    }
}
</script>
<style>
.demo div,
p {
    background: orange;
}
/* 第一种 */
@keyframes move1 {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}
.one-enter-active {
    animation: move1  0.5s linear;
}
.one-leave-active {
    animation: move1 0.5s linear reverse;
}

/* 第二种实现方式 */
.two-enter, 
.two-leave-to {
    transform: translateX(-100%);
}

.two-enter-to, 
.two-leave  {
    transform: translateX(0);
}

.two-enter-active,
.two-leave-active {
    transition: 0.5s linear;
}

</style>

第三种方式使用animate.css 
官方网站https://animate.style/
下载指令：  npm install animate.css --save
 引入 import 'animate.css';