其他分享
首页 > 其他分享> > Vue30 过度与动画

Vue30 过度与动画

作者:互联网

1 简介

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

 

2 vue内置的样式

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

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

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

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

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

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

    6)v-leave-to2.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,过度,过渡,移除,active
来源: https://www.cnblogs.com/jthr/p/16502608.html