• Vuejs——（7）过渡（动画）

    版权声明：出处http://blog.csdn.net/qq20004604

     

    目录(?)[+]

     

    本篇资料来于官方文档：

    http://cn.vuejs.org/guide/transitions.html

    本文是在官方文档的基础上，更加细致的说明，代码更多更全。

    简单来说，更适合新手阅读


    （二十四）过渡动画

    ①过渡动画的定义；

    简单来说，就是当模块消失、出现时，会以什么样的形式消失和出现；

    如果要使用过渡动画，则在标签里加入属性：

    transition=”过渡动画名”

    例如：

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <div class="box" v-if="box_1" transition="mytran">1</div>  

    这里是mytran就是过渡动画名，他是一个类名，动画将基于这个名字而添加多个不同的扩展名（具体请参看下面）

    ②过渡动画绑定的事件：

    【1】v-if

    【2】v-show

    【3】v-for（只在插入和删除时触发，可以自己写，或者使用vue-animated-list插件）；

    自己写例如：

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <div v-for="i in items" class="box" transition="mytran">{{i}}</div>  

    动画写法略（参照下面）

    【4】动态组件；

    【5】在组件的根节点上，并且被Vue实例DOM方法触发（例如：vm.$appendTo(el)）。大概就是说，把组件添加到某个根节点上去。

    ③CSS动画：

    【1】首先，需要有transition属性，然后取得其值；

    【2】其次，CSS里需要有以值为名的三个类名，分别是：

    假设transition的值为mytran，则类名为

    说明

    .mytran-transition

    动画状态，css的transition属性放在这里，他表示的类会始终存在于DOM之上；

    另外这里的样式会覆盖标签的默认class提供的样式

    .mytran-enter

    进入时，组件从这个css状态扩展为当前css状态，这个类只存在最开始的一帧

    .mytran-leave

    退出时，组件从原来的css状态恢复为这个状态，这个类从退出开始时生效，在退出结束时删除。

    如代码：

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <style>  
    2.     .box {  
    3.          100px;  
    4.         height: 100px;  
    5.         border: 1px solid red;  
    6.         display: inline-block;  
    7.     }  
    8.   
    9.     /*这个定义动画情况，以及存在时的样式，这个样式会覆盖class里的样式*/  
    10.     .mytran-transition {  
    11.         transition: all 0.3s ease;  
    12.         background-color: greenyellow;  
    13.     }  
    14.   
    15.     /* .mytran-enter 定义进入的开始状态 */  
    16.     /* .mytran-leave 定义离开的结束状态 */  
    17.     .mytran-enter, .mytran-leave {  
    18.         height: 0;  
    19.          0;  
    20.     }  
    21. </style>  
    22. <div id="app">  
    23.     <button @click="change">点击随机隐藏和显示</button>  
    24.     <br/>  
    25.     <div class="box" v-if="box_1" transition="mytran">1</div>  
    26.     <div class="box" v-if="box_2" transition="mytran">2</div>  
    27.     <div class="box" v-if="box_3" transition="mytran">3</div>  
    28. </div>  
    29. <script>  
    30.     var vm = new Vue({  
    31.         el: '#app',  
    32.         data: {  
    33.             box_1: true,  
    34.             box_2: true,  
    35.             box_3: true  
    36.         },  
    37.         methods: {  
    38.             change: function () {  
    39.                 for (var i = 1; i < 4; i++) {  
    40.                     this['box_' + i] = Math.random() > 0.5 ? true : false;  
    41.                 }  
    42.             }  
    43.         }  
    44.     })  
    45. setInterval(vm.change, 300);  
    46. </script>  

    点击会随机让3个方块隐藏或者显示；

    ④JavaScript钩子：

    【1】简单来说，这个不影响CSS动画（依然是那三个类的变化）；

    【2】这个主要用于抓取进入和离开各四个时刻，用于做某些事情；

    【3】这八个时刻分别为：

    进入：beforeEnter（进入之前），enter（进入动画刚开始），afterEnter（进入动画结束），enterCancelled（进入被中断）；

    退出：beforeLeave（退出之前），leave（退出动画刚开始），afterLeave（退出动画结束），leaveCancelled（退出被中断）；

    【4】对DOM的修改，部分情况下会恢复，例如在leave这一步修改dom的textContent属性，将在dom重新进入时恢复原状；但若在enter这一步修改，则不会恢复。

    如代码：

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. Vue.transition('mytran', {  
    2.     beforeEnter: function (el) {    //进入之前  
    3.         console.log("进入动画开始时间:" + new Date().getTime());  
    4.     },  
    5.     enter: function (el) {  
    6.         el.textContent = new Date();  
    7.     },  
    8.     afterEnter: function (el) {  
    9.         console.log("进入结束时间:" + new Date().getTime());  
    10.     },  
    11.     beforeLeave: function (el) {  
    12.         console.log("离开动画开始时间:" + new Date().getTime());  
    13.     },  
    14.     leave: function (el) {  
    15.         $(el).text("离开中..." + new Date());  
    16.     },  
    17.     afterLeave: function (el) {  
    18.         console.log("离开结束时间:" + new Date().getTime());  
    19.     }  
    20. })  

    ⑤自定义过渡类名：

    之所以要自定义过渡类名，是因为我们不可能要求每个css动画的样式，都是按照Vuejs标准的写法来写的（比如我们下载别人写的代码）；

    注：需要在声明相关的Vue实例之前进行定义。

    首先，推荐一个Vuejs官方教程推荐的动画集合：（这个不是下载链接，需要打开它去找到下载链接才能下载）

    https://daneden.github.io/animate.css/

    下载后，导入这个css文件，然后开始自定义动画；

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <div id="app">  
    2.     <button @click="change">点击随机隐藏和显示</button>  
    3.     <br/>  
    4.     <div class="box animated" v-if="box" transition="bounce">1</div>  
    5. </div>  
    6. <script>  
    7.     Vue.transition("bounce", {  
    8.         enterClass: 'bounceInLeft',  
    9.         leaveClass: 'bounceOutRight'  
    10.     })  
    11.     var vm = new Vue({  
    12.         el: '#app',  
    13.         data: {  
    14.             box: true  
    15.         },  
    16.         methods: {  
    17.             change: function () {  
    18.                 this.box = !this.box;  
    19.             }  
    20.         }  
    21.     });  
    22. </script>  

    解释：

    【1】进行动画的标签，需要有animated这个class；

    【2】enterClass和leaveClass相当于之前的xxx-enter和xxx-leave；

    【3】效果是从左边闪进来，从右边闪出去。

    【4】需要在声明Vue实例前设置动画，否则会无效；

    ⑥使用animation动画

    在Vuejs中，animation动画和transition动画是不同的。

    简单来说，transition动画分为三步：常驻类，进入时触发的类，退出时触发的类；只有常驻类有transition动画属性，其他两步只有css状态；

    而animation动画分为两步：进入时触发的类，退出时触发的类。当然，还有xxx-transition这个类存在于dom之中（这个类可以用于设置动画原点，或者干脆不设置这个类）；

    在animation动画中，进入和退出时的class类，都应该有动画效果，例如：
    [css] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. @keyframes fat {  
    2.     0% {  
    3.          100px  
    4.     }  
    5.     50% {  
    6.          200px  
    7.     }  
    8.     100% {  
    9.          100px  
    10.     }  
    11. }  
    12.   
    13. .fat-leave, .fat-enter {  
    14.     animation: fat 1s both;  
    15. }  

    进入和退出时，执行的类名和transition一样，都是xxx-leave和xxx-enter这样格式的；

    当然，也可以自定义类名。

    示例代码：
    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <style>  
    2.     .box {  
    3.          100px;  
    4.         height: 100px;  
    5.         border: 1px solid red;  
    6.         display: inline-block;  
    7.     }  
    8.   
    9.     @keyframes fat {  
    10.         0% {  
    11.              100px  
    12.         }  
    13.         50% {  
    14.              200px  
    15.         }  
    16.         100% {  
    17.              100px  
    18.         }  
    19.     }  
    20.   
    21.     .fat-leave, .fat-enter {  
    22.         animation: fat 1s both;  
    23.     }  
    24. </style>  
    25. <div id="app">  
    26.     <button @click="change">点击随机隐藏和显示</button>  
    27.     <br/>  
    28.     <div class="box animated" v-if="box" transition="fat">1</div>  
    29. </div>  
    30. <script>  
    31.     var vm = new Vue({  
    32.         el: '#app',  
    33.         data: {  
    34.             box: true  
    35.         },  
    36.         methods: {  
    37.             change: function () {  
    38.                 this.box = !this.box;  
    39.             }  
    40.         }  
    41.     });  
    42. </script>  

    效果：

    消失：先变宽，再恢复，然后消失；

    进入：出现，变宽，再恢复，停留；

    这里偷懒共用了同一个动画效果。

    ⑦除此之外，还有

    【1】显式声明动画类型（假如动画同时存在transition和animation，且分情况执行其中一种）；

    【2】过渡流程详解（触发动画时，js钩子执行与css执行的顺序）；

    【3】CSS动画（就是animation，像上面那样已经写过了，具体略）；

    【4】JavaScript过渡（不是js钩子，钩子是指在某个阶段会调用某个函数，但这个钩子跟动画无关），用JavaScript来控制动画，比如jQuery的animate方法；

    【5】v-for使用的渐进过渡；

    由于暂时用不上，所以略掉，需要查看的请打开连接：

    http://cn.vuejs.org/guide/transitions.html
  • 相关阅读:
    【SQL查询】查询列中使用条件逻辑_case when then end
    【SQL查询】查询的列起别名_AS
    【SQL查询】查询的值为空时，给出默认值_NVL函数
    工薪阶层理财建议
    软件文档编写_软件开发过程中的文档
    等价边界值测试_日期
    【登录】测试用例
    来纪中的第一天
    普及C组第二题（8.1）
    普及C组第一题（8.1）
  • 原文地址：https://www.cnblogs.com/-ding/p/6339683.html
Copyright © 2020-2023  润新知