vue.js之動畫篇

時間 2019-12-11

原文原文鏈接

本文引入類庫的方式均採用CND的方式，可直接複製代碼到編輯器中學習和測試javascript

不使用動畫切換元素

 1   <div id="app">
 2     <input type="button" value="toggle" @click="flag=!flag">
 3     <!-- 需求：點擊按鈕，讓h3顯示，再點擊讓h3隱藏 -->
 4     <h3 v-if="flag">這是一個H3</h3>
 5   </div>
 6   <script>
 7     // 建立Vue實例，獲得ViewModel
 8     var vm = new Vue({
 9       el: '#app',
10       data: {
11         flag: false
12       },
13       methods: {}
14     });
15   </script>

使用過渡類名實現動畫

<!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>

  <!-- 2. 自定義兩組樣式，來控制 transition 內部的元素實現動畫 -->
  <style>
    /* v-enter 【這是一個時間點】 是進入以前，元素的起始狀態，此時尚未開始進入 
     v-leave-to【這是一個時間點】 是動畫離開以後，離開的終止狀態，此時元素動畫已經結束了 */
    .v-enter,.v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }
    /* v-enter-active 【入場動畫的時間段】 
    v-leave-active 【離場動畫的時間段】 */
    .v-enter-active,.v-leave-active {
      transition: all 0.8s ease;
    }
  </style>
</head>
<body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 需求： 點擊按鈕，讓h3顯示，再點擊，讓h3隱藏 -->
    <!-- 1. 使用 transition元素，把須要被動畫控制的元素包裹起來 -->
    <!-- transition元素，是Vue官方提供的 -->
    <transition>
      <h3 v-if="flag">這是一個H3</h3>
    </transition>
  </div>
  <script>
    // 建立Vue實例，獲得ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });
  </script>
</body>
</html>

修改「v-」前綴用上面一種方式實現多個動畫

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>Document</title>

 9   <!-- 2. 自定義兩組樣式，來控制 transition 內部的元素實現動畫 -->
10   <style>
11     /* v-enter   【這是一個時間點】 是進入以前，元素的起始狀態，此時尚未開始進入  
12        v-leave-to【這是一個時間點】 是動畫離開以後，離開的終止狀態，此時元素動畫已經結束了 */
13     .v-enter,
14     .v-leave-to {
15       opacity: 0;
16       transform: translateX(150px);
17     }
18     /* v-enter-active 【入場動畫的時間段】 
19        v-leave-active 【離場動畫的時間段】 */
20     .v-enter-active,
21     .v-leave-active {
22       transition: all 0.8s ease;
23     }
24 
25     .my-enter,
26     .my-leave-to {
27       opacity: 0;
28       transform: translateY(70px);
29     }
30 
31     .my-enter-active,
32     .my-leave-active {
33       transition: all 0.8s ease;
34     }
35   </style>
36 </head>
37 
38 <body>
39   <div id="app">
40     <input type="button" value="toggle" @click="flag=!flag">
41     <!-- 需求： 點擊按鈕，讓h3顯示，再點擊，讓h3隱藏 -->
42     <!-- 1. 使用transition元素，把須要被動畫控制的元素，包裹起來 -->
43     <!-- transition元素，是Vue官方提供的 -->
44     <transition>
45       <h3 v-if="flag">這是一個H3</h3>
46     </transition>
47     <hr>
48     <input type="button" value="toggle2" @click="flag2=!flag2">
49     <transition name="my">
50       <h6 v-if="flag2">這是一個H6</h6>
51     </transition>
52   </div>
53   <script>
54     // 建立Vue實例，獲得ViewModel
55     var vm = new Vue({
56       el: '#app',
57       data: {
58         flag: false,
59         flag2: false
60       },
61       methods: {}
62     });
63   </script>
64 </body>
65 
66 </html>

使用第三方類庫來實現

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
11   <!-- 入場 bounceIn    離場 bounceOut -->
12 </head>
13 
14 <body>
15   <div id="app">
16     <input type="button" value="toggle" @click="flag=!flag">
17     <!-- 使用  :duration="{ enter: 200, leave: 400 }"  來分別設置入場的時長和離場的時長  -->
18     <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }">
19       <h3 v-if="flag" class="animated">這是一個H3</h3>
20     </transition>
21   </div>
22 
23   <script>
24     // 建立Vue實例，獲得ViewModel
25     var vm = new Vue({
26       el: '#app',
27       data: {
28         flag: false
29       },
30       methods: {}
31     });
32   </script>
33 </body>
34 
35 </html>

使用鉤子函數模擬-動畫的生命週期函數

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>Document</title>

 9   <style>
10     .ball {
11       width: 15px;
12       height: 15px;
13       border-radius: 50%;
14       background-color: red;
15     }
16   </style>
17 </head>
18 <body>
19   <div id="app">
20     <input type="button" value="快到碗裏來" @click="flag=!flag">
21     <!-- 1. 使用 transition 元素把 小球包裹起來 -->
22     <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
23       <div class="ball" v-show="flag"></div>
24     </transition>
25   </div>
26 
27   <script>
28 
29     // 建立 Vue 實例，獲得 ViewModel
30     var vm = new Vue({
31       el: '#app',
32       data: {
33         flag: false
34       },
35       methods: {
36           // 注意： 動畫鉤子函數的第一個參數：el，表示 要執行動畫的那個DOM元素，是個原生的 JS DOM對象
37           // 你們能夠認爲 ， el 是經過 document.getElementById('') 方式獲取到的原生JS DOM對象
38         beforeEnter(el) {
39           // beforeEnter 表示動畫入場以前，此時動畫還沒有開始，能夠在beforeEnter中設置元素開始動畫以前的起始樣式
40           // 設置小球開始動畫以前的起始位置
41           el.style.transform = "translate(0, 0)"
42         },
43         enter(el, done) {
44           // 這句話沒有實際的做用，可是，若是不寫，出不來動畫效果；
45           // 能夠認爲 el.offsetWidth 會強制動畫刷新
46           el.offsetWidth
47           // enter 表示動畫 開始以後的樣式，這裏，能夠設置小球完成動畫以後的，結束狀態
48           el.style.transform = "translate(150px, 450px)"
49           el.style.transition = 'all 1s ease'
50 
51           // 這裏的done，起始就是afterEnter這個函數，也就是說：done是afterEnter函數的引用
52           done()
53         },
54         afterEnter(el) {
55           // 動畫完成以後，會調用afterEnter
56           // console.log('ok')
57           this.flag = !this.flag
58         }
59       }
60     });
61   </script>
62 </body>
63 
64 </html>

動畫列表

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10   <style>
11     li {
12       margin: 5px;
13       line-height: 35px;
14       padding-left: 5px;
15       font-size: 12px;
16       width: 100%;
17     }
18     li:hover {
19       background-color: hotpink;
20       transition: all 0.8s ease;
21     }
22     .v-enter,
23     .v-leave-to {
24       opacity: 0;
25       transform: translateY(80px);
26     }
27     .v-enter-active,
28     .v-leave-active {
29       transition: all 0.6s ease;
30     }
31     /* 下面的 .v-move 和 .v-leave-active配合使用，可以實現列表後續的元素漸漸地漂上來的效果 */
32     .v-move {
33       transition: all 0.6s ease;
34     }
35     .v-leave-active {
36       position: absolute;
37     }
38   </style>
39 </head>
40 <body>
41   <div id="app">
42     <div>
43       <label>
44         Id:
45         <input type="text" v-model="id">
46       </label>
47       <label>
48         Name:
49         <input type="text" v-model="name">
50       </label>
51       <input type="button" value="添加" @click="add">
52     </div>
53     <!-- <ul> -->
54     <!-- 在實現列表過渡的時候，若是須要過渡的元素，是經過 v-for 循環渲染出來的，不能使用 transition 包裹，須要使用 transitionGroup -->
55     <!-- 若是要爲 v-for 循環建立的元素設置動畫，必須爲每個 元素 設置 :key 屬性 -->
56     <!-- 給 ransition-group 添加 appear 屬性，實現頁面剛展現出來時候，入場時候的效果 -->
57     <!-- 經過 爲 transition-group 元素，設置 tag 屬性，指定transition-group渲染爲指定的元素，若是不指定tag屬性，默認渲染爲span標籤 -->
58     <transition-group appear tag="ul">
59       <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
60         {{item.id}} --- {{item.name}}
61       </li>
62     </transition-group>
63     <!-- </ul> -->
64   </div>
65   <script>
66     // 建立 Vue 實例，獲得 ViewModel
67     var vm = new Vue({
68       el: '#app',
69       data: {
70         id: '',
71         name: '',
72         list: [
73           { id: 1, name: 'java' },
74           { id: 2, name: 'C#' },
75           { id: 3, name: 'php' },
76           { id: 4, name: 'javascript' }
77         ]
78       },
79       methods: {
80         add() {
81           this.list.push({ id: this.id, name: this.name })
82           this.id = this.name = ''
83         },
84         del(i) {
85           this.list.splice(i, 1)
86         }
87       }
88     });
89   </script>
90 </body>
91 </html>