首页 > 其他分享> 文章详细

Vue30 过度与动画

2022-07-21 17:31:24 阅读：170 来源： 互联网

标签：动画定义样式 Vue30 过度过渡移除 active

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9