时间戳

首页 > 技术文章 > vue03-动画的学习

vue03-动画的学习

lirun-rainbow 2018-07-25 19:52 原文

2018-07-2512:44:01  第一次发表博客，就是一次学习笔记，功能还不完全了解 不妥之处，大家多提意见

vue在 插入、更新和移除DOM时，提供了多种不同的应用过度效果：

 1、在css过渡和动画中自动应用class

 2、 可以配合使用第三方库 如 Animate.css

 3、在过渡钩子函数中使用JavaScript 直接操作 DOM

 4、 可以配合使用第三方动画库， 如Velocity.js

 

一、过渡和动画中应用class类名

  步骤：

  1. 找到需要添加过度的元素，把他用transition标签包裹起来，然后给transition标签指定name属性，这个name属性会作为类名的前缀，如果没有定义name属性，默认为 v- 前缀

   2. 定义类名。 默认为 v-enter   v-enter-active   v-enter-to (进入动画)  和  v-leave   v-leave-active   v-leave-to (离开动画)

 <div id="app">
      <!-- 1. 找到需要添加过度的元素，把他用transition标签包裹起来，然后给transition标签指定name属性，这个name属性会作为类名的前缀，如果没有定义name属性，默认为 v- 前缀-->
      <transition name="slide">
        <div v-if="isShow">我是中国人</div>
      </transition>
      <button @click="isShow=!isShow">点击按钮切换隐藏</button>
 </div>

 

 <style>  
       /* 2.1 定义进入过渡的开始状态和离开过渡结束状态 */
      .slide-enter,.slide-leave-to {
         padding-left: 160px;
       }
        /* 2.2  定义过渡状态 */
      .slide-enter-active,.slide-leave-active {
        transition: all 2s;
      }
       /* 2.3 定义进入过渡的结束状态和离开过渡的开始状态 */
      .slide-enter-to,.slide-leave {
        padding-left: 0px;
      }
    </style>
<script>
      var vm = new Vue({
        el: '#app',
        data: {
          isShow: true
        }
      })
    </script>

  

        过渡和动画中应用class类名 示意图

   二、过渡和动画中 应用第三方动画库 animate.css

   步骤：

    1、通过 link 标签引入 animate.css 动画库

   

<link rel="stylesheet" href="./css/animate.css">

   2. 把要添加动画的元素用 transition 标签包裹,同时添加动画进入属性 enter-active-class="animated 动画效果的名称" 和 动画离开属性 leave-active-class="animated 动画效果的名称"

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <title>过渡和动画：animate动画库</title>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <script src="./js/vue2.js"></script>
 8      <!-- 1. 引入animate.css 文件 -->
 9     <link rel="stylesheet" href="./css/animate.css">
10   </head>
11   <body>
12     <div id="app">
13   <!-- 2. 把要添加动画的元素用transition标签包裹,同时添加动画进入属性enter-active-class="animated 动画效果的名称" 和 动画离开属性 leave-active-class="animated 动画效果的名称" -->
14       <transition
15         enter-active-class="animated zoomIn"
16         leave-active-class="animated hinge"
17       >
18           <div v-if="isShow">我是中国人,我爱中国</div>
19       </transition>
20       <button @click="isShow=!isShow">点击实现动画效果</button>
21     </div>
22     <script>
23       var vm = new Vue({
24         el: '#app',
25         data: {
26           isShow: true
27         }
28       })
29     </script>
30   </body>
31 </html>
View Code

 

三、过渡和动画： 应用 JavaScript 钩子函数

 

    1. 先把需要添加动画的元素用 transition 标签包裹起来 

    2. 在transition 属性中声明JavaScript钩子

          v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter"

          v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave"

  然后在methods方法中去定义各个函数

代码案例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <title>过渡和动画：JavaScript钩子</title>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <script src="./js/vue2.js"></script>
 8   </head>
 9   <body>
10     <div id="app">
11         <!-- 1. 先把先不要添加动画的元素用 transition 标签包裹起来 -->
12         <!-- 2. 在transition 属性中声明JavaScript钩子 
13            v-on:before-enter="beforeEnter"  v-on:enter="enter" v-on:after-enter="afterEnter"
14            v-on:before-leave="beforeLeave"  v-on:leave="leave" v-on:after-leave="afterLeave"   然后在methods方法中去定义各个函数--> 
15       <transition
16         v-on:before-enter="beforeEnter"
17         v-on:enter="enter"
18         v-on:after-enter="afterEnter"
19 
20         v-on:before-leave="beforeLeave"
21         v-on:leave="leave"
22         v-on:after-leave="afterLeave"
23       >
24           <div v-if="isShow">我是一个还未出道的程序员</div>
25       </transition>
26       <button @click="isShow=!isShow">点击按钮使用JavaScript做动画</button>
27     </div>
28     <script>
29       var vm = new Vue({
30         el: '#app',
31         data: {
32           isShow: true
33         },
34         methods: {
35           beforeEnter(el){
36             console.log('beforeEnter');
37             el.style.paddingLeft = '100px'
38           },
39            //动画结束完成时 一定要调用done 函数
40           enter(el, done){
41             console.log('enter');
42             //done()
43             var step = 1;
44             var interval = setInterval(() => {
45               el.style.paddingLeft = (100 - step) + 'px';
46               step++;
47               if(step === 100){
48                 clearInterval(interval);
49                 done();
50               }
51             },3)
52           },
53           afterEnter(el){
54             console.log('afterEnter')
55           },
56           beforeLeave(el){
57             console.log('beforeLeave');
58             el.style.paddingLeft = '0'
59           },
60           //动画结束完成时 一定要调用done 函数
61           leave(el, done){
62             console.log('leave')
63             //done()
64             var step = 1;
65             var interval = setInterval(() => {
66               el.style.paddingLeft = (0 + step) + 'px';
67               step++;
68               if(step === 100){
69                 clearInterval(interval);
70                 done();
71               }
72             },15)
73           },
74           afterLeave(el){
75             console.log('afterLeave')
76           }
77         }
78       })
79     </script>
80   </body>
81 </html>
View Code

 

推荐阅读