Vue动画操作

概述

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

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

transition

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

过渡的类名

在进入/离开的过渡中,会有 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 被删除),在过渡/动画完成之后移除。
<!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>

原文地址:https://www.cnblogs.com/xiaowie/p/11624459.html

时间: 2024-11-09 06:03:56

Vue动画操作的相关文章

AngularJS学习--- 动画操作 (Applying Animations) ngAnimate step 12

1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的代码差异:https://github.com/angular/angular-phonecat/compare/step-11...step-12 Dependencies(依赖的js库): bower.json { "name": "angular-seed", &

09.11 jquery04 效果 基本 滑动滑出 淡入淡出 自定义动画 动画操作 工具 浏览器 对象和属性操作核心

# 效果 ### 基本 (width/height/opacity) * show() * hide() * toggle() ### 滑动滑出 (height) * slideUp()       隐藏 * slideDown()  显示 * slideToggle() ### 淡入淡出 * fadeOut()    隐藏 * fadeIn()      显示 * fadeToggle() * fadeTo() 不占用位置 消失之后后面的自动向上移动 ### 自定义动画 * animate(p

Jquer基础之动画操作

Jquery的动画效果能够轻松的为网页添加动画效果,为网页带来了新的活力. 一.show()方法和hide()方法 show()方法和hide()方法是jquery中最基本的动画方法.使用show()方法会将隐藏的元素显示出来,使用hide()方法会将元素的属性设置为display:none.使用hide()方法会记住原来的display属性值,并把现在的display属性设置为none;show()方法会元素的属性设置为hide()前的属性值. 示例: $("btnShowHide"

unity3d动画操作以及动画实现

今天主要总结的是 unity3d 中内置动画操作,以及代码事件编写动画实现 1.如何导入.执行外部动画 在项目窗口中,首先,单击选择我们所准备的动画模型,在属性面板中选择Animations栏, 在属性中点击"+","-"可以增加和删除动画片段, 而在Start以及End中,可以分别设置每一个动画片段的开始帧数及结束帧数. 下面是我自己动画做的一个分解: Idle:表示我动画中的准备动作. Aim:表示我动画中的瞄准动作. Fire:表示我动作中的投篮动作. 当上面

10 个非常实用的 SVG 动画操作JavaScript 库

10 个非常实用的 SVG 动画操作JavaScript 库 SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些类库会帮助我们将SVG动画提高一个等级. Vivus Vivus 是一个能动画js类库,它能够给SVG图像显示出被画出来的过程.Vivus是没有其他类库依赖的(比如jQuery).你仅仅需要在页面中加入这个.js文件,然后传入需要被用来动画的

vue动画的用法

vue动画 在vue.js中有两种写动画的方法,第一种就是像js里一样,用原生代码来实现,第二种则是使用animate.css的动画类文件,这个动画类和bootstrap.css文件类似,直接调用类就可以了,话不多说,直接上代码. 一.vue.js原生动画 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title>

vue里操作DOM

一般来说你要在vue里操作DOM,要先在标签里加上ref="",如下: <h2 ref="s" @click="sss">Essential Links</h2> 然后在点击的事件sss写下你想要的效果代码:(注意的是上面的ref的s,要写在下面this.$refs,不要忘了) methods: { sss() { this.$refs.s.style.color = "blue"; } } 如果你想要

vue动画及其原理

1,vue动画的实现原理,主要是通过在不同时期给需要动画的dom元素加上css动画样式 我们以显示和隐藏动画为例 a, 需要动画的dom元素 b,点击时vue控制往vue中加的样式 2,  我们以两张图为例,更为清楚地表示vue什么时候往dom元素中加样式 点击按钮隐藏时 点击按钮逐渐显示时 如果您还是不理解,没关系,下面是代码,只要你对css3有一定了解,肯定能明白其中的原理(记住一定要引入vue文件) <!DOCTYPE html><html>    <head> 

关于Vue数组操作

Vue的数组操作的实现代码大致如下: const aryMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']; const arrayAugmentations = []; aryMethods.forEach((method)=> { // 这里是原生Array的原型方法 let original = Array.prototype[method]; // 将push, pop等封装好的方法定义在对