Vue动画操作

Posted 2022-12-25 xiaowie

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue动画操作相关的知识，希望对你有一定的参考价值。

概述

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 javascript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

Vue 提供了

transition

的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡。

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>



    <style>

        /* 使用Vue过度类来实现动画，只需要添加下面的类就行了 */
        /* 动画在进入前和离开后的状态 */
     .v-enter,.v-leave-to
        opacity: 0;
        transform: translate(100px,0);
     

     /* 表示动画在执行的时候的状态 */
     .v-enter-active,.v-leave-active
        transition: all 1s ease;
     
   

   /* 如果我想给h1 添加不同的动画呢  需要更改transition的name 属性 */
    

    .china-enter,.china-leave-to
        opacity: 0;
        transform: translate(0,150px);
        transition: all .4s ease;

    
    .china-enter-active,.china-leave-active
        transition: all 1s ease-in-out;
    
    </style>

    <div class="container">
        <input type="button" value="动画" @click="animationClick">
        <transition>
                <h3 id="cc" v-show="flog">中国70岁生日快乐</h3>
        </transition>
        <input type="button" value="动画2" v-on:click="animationClick2">
        <transition name="china">
            <h1 v-show="flog2">祖国生日快乐</h1>
        </transition>

    </div>



    <script>
        var vm=new Vue(
            el:‘.container‘,
            data:
                flog:false,
                flog2:false
            ,
            methods: 
                animationClick:function()
                   this.flog=!this.flog
            ,
            animationClick2()
                this.flog2=!this.flog2
            
            
        
    
    );
    </script>


</body>
</html>

　使用第三方Animate类库来实施Vue动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/Animate.css">
</head>
<body>
    

        <div class="container">
                <input type="button" value="动画" @click="animationClick">
                <!-- 使用第三方 Animate.css类库 注意：
                    1. 需要在transition 元素中 添加 enter-active-class 和leave-active-calss 类名
                    2.在enter-active-class和leave-active-class中 必须要写上 animated 之后在跟上动画的类名
                    3.:duration 持续时间  是绑定属性v-bind -->
                <transition enter-active-class="animated hinge" leave-active-class="animated bounceOutRight" :duration="10">
                        <h3 id="cc" v-show="flog">中国70岁生日快乐</h3>
                </transition>
        
            </div>
        
        
        
            <script>
                var vm=new Vue(
                    el:‘.container‘,
                    data:
                        flog:false,
                    ,
                    methods: 
                        animationClick:function()
                           this.flog=!this.flog
                    ,
                    animationClick2()
                        this.flog2=!this.flog2
                    
                    
                
            
            );
            </script>
        
</body>
</html>

显性的过渡持续时间

2.2.0 新增

在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。

在这种情况下你可以用 <transition> 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：

<transition :duration="1000">...</transition>

你也可以定制进入和移出的持续时间：

<transition :duration=" enter: 500, leave: 800 ">...</transition>

以上是关于Vue动画操作的主要内容，如果未能解决你的问题，请参考以下文章

Vue动画操作

概述

过渡的类名

使用第三方Animate类库 来实施Vue动画

显性的过渡持续时间

　使用第三方Animate类库来实施Vue动画