Vue30 过度与动画

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>