Vue学习：动画与过度（在插入、更新移除DOM元素，合适的时候给元素添加样式类名）

按钮往左边往右边显示隐藏

v-show显示隐藏

    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
            <h1 v-show="isShow">你好啊！</h1>
    </div>

    export default {
        name:'Test',
        data() {
            return {
                isShow:true
            }
        },
    }

但是是直接显示隐藏，需要动画效果（显示+隐藏是反向——直接反转就有了）

直接使用class：——点击事件动态添加，进行判断

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
            <h1 v-show="isShow" class="come">你好啊！</h1>
    </div>
</template>

.come{
        animation:animate 1s;
    }
    .go{
        animation:animate 1s reverse;
    }
    @keyframes animate {
        from{
            transform: translateX(-100%);/* 左边很远处 */
        }
        to{
            transform: translateX(0px);
        }
    }

使用VUE实现动画

transition：包裹你想要实现动画的对象()：——————在浏览器中会被去掉

.v-enter-active:进入时候准备的动画

.v-leave-active:离开时候准备的动画

    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition>
            <h1 v-show="isShow">你好啊！</h1>
        </transition>
    </div>

.v-enter-active{
        animation: animate 0.5s linear;
    }

    .v-leave-active{
        animation: animate 0.5s linear reverse;
    }
@keyframes animate {
        from{
            transform: translateX(-100%);/* 左边很远处 */
        }
        to{
            transform: translateX(0px);
        }
    }

可以给取名字 取名字之后需要给后面的动画效果添加name

<transition name="hello">
            <h1 v-show="isShow">你好啊！</h1>
        </transition>
  .hello-enter-active{
        animation: animate 0.5s linear;
    }

    .hello-leave-active{
        animation: animate 0.5s linear reverse;
    }

当一进场就有效果：appear属性为真 appear：true 不成立，true是字符串 :appear="true"

可以省略

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition name="hello" appear>
            <h1 v-show="isShow">你好啊！</h1>
        </transition>
    </div>
</template>
 h1{
        background-color: orange;
    }

    .hello-enter-active{
        animation: animate 0.5s linear;
    }

    .hello-leave-active{
        animation: animate 0.5s linear reverse;
    }
    @keyframes animate {
        from{
            transform: translateX(-100%);/* 左边很远处 */
        }
        to{
            transform: translateX(0px);
        }
    }

使用过度实现：

Vue对一个物体的出现与消失各个＋了3个类：

.hello-enter（进入起点）.hello-enter-active(进入过程),.hello-enter-to（进入终点）

.hello-leave (离开的起点) .hello-leave-active（离开过程） .hello-leave-to (离开的终点)

进入的起点=离开的终点 离开的起点-进入的终点

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

h1{
        background-color: orange;
         transition: 0.5s linear;//过度效果
  }

/* 进入的起点、离开的终点 */
    .hello-enter,.hello-leave-to{
        transform: translateX(-100%);
    }
    /* 进入的终点、()) */
    .hello-enter-to,.hello-leave{
        transform: translateX(0);
    }

优化：过度效果

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);
    }

实现 多个元素共同过度效果

transition标签里面的元素只能有一个，所以使用 transition-group，且每个元素都要有唯一的key值

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

你也可以使用一个元素包裹,但是无法实现互斥的效果

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition name="hello" appear>
            <div v-show="!isShow">
            <h1>你好啊！</h1>
            <h1>尚硅谷！</h1>
        </div>
        </transition>
    </div>
</template>

集成第三方样式库：animate.css

安装库

npm install animate.css

import引入

    import 'animate.css'

.enter-active-class进入的动画 leave-active-class 离开的动画

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition-group 
            appear
            name="animate__animated animate__bounce" 
            enter-active-class="animate__swing"
            leave-active-class="animate__backOutUp"
        >
            <h1 v-show="!isShow" key="1">你好啊！</h1>
            <h1 v-show="isShow" key="2">尚硅谷！</h1>
        </transition-group>
    </div>
</template>