1 简介

　　Vue封装的过度与动画，插入、更新或者移除 DOM 时，在合适的时候给元素添加样式类名，达到应用过渡和动画效果。

2 vue内置的样式

　　Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：

　　　　1）v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

　　　　2）v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

　　　　3）v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

　　　　4）v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

　　　　5）v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

　　　　6）v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

3 使用

3.1 准备好样式

　　需要先准备号上面的6个样式中需要用到的样式

3.2 使用标签<transition>包裹要实现过度或动画的标签

<transition name = "nameoftransition">

   <div></div>

</transition>

3.3 appear属性

　　默认页面初始化加载的时候不产生效果，初始化完成后才会产生效果，如果想一开始就产生效果，须在transition 标签加上属性appear

3.4 <transition-group>标签

　　若有多个元素需要使用统一的效果，需要使用<transition-group>标签，且元素需要定义key属性

<transition-group name="hello" appear>

　　<h1 v-show="!isShow" key="1">你好啊！</h1>

　　<h1 v-show="isShow" key="2">哈哈哈！</h1>

</transition-group>

3.5 动画示例

　　过渡的示例就不写了

  transition里面的那么属性hello，对应下面的样式名称的开头.hello-enter-active，不定义name属性的话就是默认v开头，定义name属性就是name属性值开头

<template>

    <div>

       <transition name="hello" appear>

             <h1 v-show="isShow">你好啊！</h1>

        </transition>

        <button @click="cli">显示/隐藏</button>

    </div>

</template>

<script>

    export default {

        name:'StudentComp',

        data(){

            return {

               isShow:true

            }

        },

        methods: {

            cli(){

                this.isShow = !this.isShow

            }

        },

    }

</script>

<style >

    /*进入的过程中的样式 */

    .hello-enter-active{

        animation: hello 0.5s linear;

    }

    /*离开的过程中的样式 */

    .hello-leave-active{

        animation: hello 0.5s linear reverse;

    }

    /*定义动画 */

    @keyframes hello {

        from{

        transform: translateX(-100%);

        }

        to{

        transform: translateX(0px);

        }

  }

</style>

4 第三方动画库Animate.style

　　有很多的第三方动画库可以拿过来直接使用，Animate.style 就是一个不错的

4.1 官网

　　https://animate.style/

4.2 使用

　1）安装

npm install animate.css

　2）引入

import 'animate.css'

　3）使用

　　在transition或者transition-group标签里面
　　　　1）填写name属性，值为animate__animated animate__bounce
　　　　2）填写属性enter-active-class ，进来的样式名称(不需要可以不写)
　　　　3）填写属性leave-active-class，离开的样式名称(不需要可以不写)
　　
　　样式的效果可以在官网右侧查看，样式名称也可以在这里复制

<template>

    <div>

       <transition

            appear

            name="animate__animated animate__bounce"

            enter-active-class="animate__swing"

            leave-active-class="animate__backOutUp"

        >

             <h1 v-show="isShow">你好啊！</h1>

        </transition>

        <button @click="cli">显示/隐藏</button>

    </div>

</template>

<script>

import 'animate.css'

    export default {

        name:'StudentComp',

        data(){

            return {

               isShow:true

            }

        },

        methods: {

            cli(){

                this.isShow = !this.isShow

            }

        },

    }

</script>

巴特西

Vue30 过度与动画