Vue -- transition過渡動畫 · Vue&&TypeSprict--基礎總結

看一下文檔中key [TOC] >[success] # transition -- Vue的過渡動畫 ~~~ 1.這里面的transition 是vue所屬標簽，所以是在vue中才可以使用 2.什么場景可以使用transition : 2.1條件渲染 (使用 v-if) 2.2條件展示 (使用 v-show) 2.3動態組件 2.4組件根節點 ~~~ >[info] ## transition 使用 ~~~ 1.整個使用筆者自己將它分為三種，第一種是全程動畫有去有回，第二種半程動畫，只去或者只回，第三種使用第三方動畫庫'Animate.css ' ~~~ >[danger] ##### 第一種自定義全程動畫 * 概念理解 ~~~ 1.解釋下筆者說的全程動畫，是整個動畫有來有回，簡單的理解，有一個按鈕控制了一個數據的顯示和隱藏，當第一次點擊這個按鈕，讓信息顯示的時候會執行一個顯示的過場動畫，第二次點擊這個按鈕，內容就會隱藏，但這個隱藏動畫起始展示位置會在你第一次顯示位置的基礎上執行。 2.簡單的說動畫是反復交替的，也就是整體構成會有兩次，下面的案例會說明上面的解釋 ~~~ * 使用方法 ~~~ 1.根據上面分析，可以勾勒出動畫執行的時間效果圖，最開始進入動畫進入之前，'元素的起始狀態' --- 》'入場動畫的時間段'--》'離場動畫的時間段' --》 '畫離開之后，離開的終止狀態' 2.下面官方的圖可以更直觀的說明 3.將官方規定的執行順序class 做一個具體說明: 3.1 v-enter 【這是一個時間點】是進入之前，元素的起始狀態，此時還沒有開始進入 3.2.v-enter-active 【入場動畫的時間段】 3.3 v-leave-to 【這是一個時間點】是動畫離開之后，離開的終止狀態，此時，元素動畫已經結束了 3.4.v-leave-active 【離場動畫的時間段】 ~~~ ![](https://box.kancloud.cn/ae162747a2cf33ddfd48cf2bb0440948_678x255.png) * 案例 ![](https://box.kancloud.cn/8a246e33f7b66a2245825cc180f9ba10_235x93.png) ~~~ 1.其實下面案例可以整合寫在一起，由于防止整合寫法讓思維固化，認為不能拆分單獨定義每個階段，下面案例采用的就是不是整合寫法 2.下面的效果解釋，當動畫進入的時候從0-1整體0.6s顯示，當第二次點擊，隱藏的時候接著上次從1-0 整體用時1s 3.整合寫法： .v-enter-active, .v-leave-active{ transition: all 1s ease; } .v-leave-to { opacity: 0; } ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> .v-enter{ opacity: 0; /*剛開始還沒進入的時候透明度為零*/ } .v-enter-active{ transition: all 0.6s ease; } .v-leave-active{ transition: all 1s ease; } .v-leave-to{ opacity: 0; } </style> </head> <body> <div id="app"> <button @click="flag=!flag">執行往返動畫</button> <transition> <p v-if="flag">我是那段被執行的往返動畫</p> </transition> </div> </body> <script> let vm = new Vue({ el:"#app", data:{ flag:false, } }) </script> </html> ~~~ >[danger] ##### 第二種半程動畫 ~~~ 1.有時候執行動畫的時候，只想執行半程，舉個例子，當下訂單購物的時候，點擊商品好多時候，商品會有一個動畫效果進入購物車，如果這種，采用了全程動畫，第二次點擊的時候小球就會從購物車出來，但其實這不是我們想要的，我們想要的不管第幾次點擊小球都是從商品到購物車。 2.半程動畫也就可以實現調用一些第三方動畫效果的js，讓實現通過js調用，實現全程動畫，因為半程動畫是在方法中寫的而不是css中。 ~~~ * 使用方法(JavaScript 鉤子) ~~~ 1.首先半程動畫都是函數，因此v-on綁定指定的鉤子事件，執行自己定義的事件方法。 2.使用寫法: <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" celled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" ancelled" >  </transition> 3.參數介紹: methods: { // 注意beforeEnter參數el是綁定對象的dom // 表示動畫入場之前，此時，動畫尚未開始，可以在 beforeEnter 中，設置元素開始動畫之前的起始樣式 beforeEnter: function (el) { }, // enter 表示動畫開始之后的樣式，這里，可以設置小球完成動畫之后的，結束狀態 // 這里的 done，起始就是 afterEnter 這個函數，也就是說：done 是 afterEnter 函數的引用 //el.offsetWidth 會強制動畫刷新,沒有實際的作用，但是，如果不寫，出不來動畫效果； enter: function (el, done) { el.offsetWidth done() }, //控制小球的顯示與隱藏 afterEnter: function (el) { // ... }, beforeLeave/leave/afterLeave 和上面類似只不過這里相當于往返動畫的第二階段 ~~~ * 特別解釋下執行順序 ~~~ 1.首先beforeEnter 中的el參數來規定dom初始畫的位置顏色等基礎值， enter 中的el參數來規定動畫的效果值，done參數來調用afterEnter，而 afterEnter 函數用了執行控制顯示隱藏的data值變化。主要的功能第二次點擊按鈕的時候，實際是吧在enter執行done時候的數值再次變回初始值 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> .ball { width: 15px; height: 15px; border-radius: 50%; background-color: red; } </style> </head> <body> <div id="app"> <input type="button" value="快到碗里來" @click="flag=!flag">  <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="ball" v-show="flag"></div> </transition> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: false }, methods: { // 注意：動畫鉤子函數的第一個參數：el，表示要執行動畫的那個DOM元素，是個原生的 JS DOM對象 // 大家可以認為， el 是通過 document.getElementById('') 方式獲取到的原生JS DOM對象 beforeEnter(el){ // beforeEnter 表示動畫入場之前，此時，動畫尚未開始，可以在 beforeEnter 中，設置元素開始動畫之前的起始樣式 // 設置小球開始動畫之前的，起始位置 el.style.transform = "translate(0, 0)" }, enter(el, done){ // 這句話，沒有實際的作用，但是，如果不寫，出不來動畫效果； // 可以認為 el.offsetWidth 會強制動畫刷新 el.offsetWidth // enter 表示動畫開始之后的樣式，這里，可以設置小球完成動畫之后的，結束狀態 el.style.transform = "translate(150px, 450px)" el.style.transition = 'all 1s ease' // 這里的 done，起始就是 afterEnter 這個函數，也就是說：done 是 afterEnter 函數的引用 done() }, afterEnter(el){ // 動畫完成之后，會調用 afterEnter // console.log('ok') // 這句話，第一個功能，是控制小球的顯示與隱藏 // 第二個功能：直接跳過后半場動畫，讓 flag 標識符直接變為 false // 當第二次再點擊按鈕的時候， flag false -> true this.flag = !this.flag // el.style.opacity = 0.5 // Vue 把一個完整的動畫，使用鉤子函數，拆分為了兩部分： // 我們使用 flag 標識符，來表示動畫的切換； // 剛以開始，flag = false -> true -> false } } }); </script> </body> </html> ~~~ >[danger] ##### 第三種使用第三方樣式包animate.css ~~~ 1. 去官網找對應的animate動畫效果即可 ~~~ ~~~ <script src="./lib/vue-2.4.0.js"></script> <link rel="stylesheet" href="./lib/animate.css">  </head> <body> <div id="app"> <input type="button" value="toggle" @click="flag=!flag">      <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }"> <h3 v-if="flag" class="animated">這是一個H3</h3> </transition> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: false }, methods: {} }); </script> </body> </html> ~~~ >[info]## 自定義transition ~~~ 1可以自定義多個動畫效果使用 2.在被包裹的transition 加那么屬性 3.使用的時候加對應的name 前綴 ~~~ >[danger] ##### 案例 ~~~ <script src="./lib/vue-2.4.0.js"></script>  <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; } .my-enter, .my-leave-to { opacity: 0; transform: translateY(70px); } .my-enter-active, .my-leave-active{ transition: all 0.8s ease; } </style> </head> <body> <div id="app"> <input type="button" value="toggle" @click="flag=!flag">    <transition> <h3 v-if="flag">這是一個H3</h3> </transition> <hr> <input type="button" value="toggle2" @click="flag2=!flag2"> <transition name="my"> <h6 v-if="flag2">這是一個H6</h6> </transition> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: false, flag2: false }, methods: {} }); </script> </body> </html> ~~~ >[info] ## 給v-for 增加transition效果 ~~~ 1.多個元素過渡(設置key)當有相同標簽名的元素切換時，需要通過 key 特性設置唯一的值來標記以讓 Vue 區分它們，否則 Vue 為了效率只會替換相同標簽內部的內容。mode:in-out ; out-in 2.列表過渡(設置key)<transition-group>不同于 transition，它會以一個真實元素呈現：默認為一個 <span>。你也可以通過 tag 特性更換為其他元素。提供唯一的 key 屬性值 ~~~ >[danger] ##### 案例 ~~~ <!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> <style> li { border: 1px dashed #999; margin: 5px; line-height: 35px; padding-left: 5px; font-size: 12px; width: 100%; } li:hover { background-color: hotpink; transition: all 0.8s ease; } .v-enter, .v-leave-to { opacity: 0; transform: translateY(80px); } .v-enter-active, .v-leave-active { transition: all 0.6s ease; } /* 下面的 .v-move 和 .v-leave-active 配合使用，能夠實現列表后續的元素，漸漸地漂上來的效果 */ .v-move { transition: all 0.6s ease; } .v-leave-active{ position: absolute; } </style> </head> <body> <div id="app"> <div> <label> Id: <input type="text" v-model="id"> </label> <label> Name: <input type="text" v-model="name"> </label> <input type="button" value="添加" @click="add"> </div>      <transition-group appear tag="ul"> <li v-for="(item, i) in list" :key="item.id" @click="del(i)"> {{item.id}} --- {{item.name}} </li> </transition-group>  </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { id: '', name: '', list: [ { id: 1, name: '趙高' }, { id: 2, name: '秦檜' }, { id: 3, name: '嚴嵩' }, { id: 4, name: '魏忠賢' } ] }, methods: { add() { this.list.push({ id: this.id, name: this.name }) this.id = this.name = '' }, del(i) { this.list.splice(i, 1) } } }); </script> </body> </html> ~~~