使用 transition 標簽實現單元素組件的過渡和動畫效果 · vue筆記

[TOC] >[success] # 使用 transition 標簽實現單元素組件的過渡和動畫效果接下來講解一下 **vue** 里面關于 **動畫** 和 **過渡效果** 的一些 **封裝** ，使用這些**封裝** ，能讓我們更加的方便去編寫 **vue** 里面的 **動畫** 和 **過渡效果** 。 >[success] ## 單組件的入場 / 出場動畫（過渡效果） **單元素** 或 **單組件** 的 **入場 / 出場** 動畫，只控制一個 **元素（或組件）** ，的**顯示隱藏** 狀態，就叫做 **單元素** 或 **單組件** ，元素從 **展示變成隱藏這就叫做出場** ，從 **隱藏變成展示就叫做入場** ， **vue** 給我們提供了 **transition** 標簽，我們可以通過 **transition** 標簽來做 **入場、出場動畫** 。 **transition** 需要配合著一些 **樣式** 才會好用，具體需要哪些樣式呢，如下： | class類名 | 說明 | | --- | --- | | **入場動畫**：| | | .v-enter-from | 入場效果， **最初展示的模樣** | | .v-enter-active | 入場動畫的 **過渡（過程）** | | .v-enter-to | 入場 **動畫結束** 時候 | | **出場動畫**： | | | .v-leave-from | 出場效果 | | .v-leave-active | 出場動畫的過渡（過程） | | .v-leave-to | 入場 **動畫結束** 時候 | 使用案例如下： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>單組件的入場 / 出場動畫</title> <style> /* --------------------入場動畫----------------------- */ /* 入場效果*/ .v-enter-from { opacity: 0; } /* 入場動畫的過渡（過程） */ /* .v-enter-active { transition: opacity 3s ease-out; // 單獨寫可以自定義過渡效果的不同 }*/ /* 結束時候 */ .v-enter-to { opacity: 1; } /* --------------------出場動畫----------------------- */ /* 出場效果（可以不寫，因為出場動畫出現的一瞬間本身就是顯示的狀態）*/ .v-leave-from { opacity: 1; } /* 出場動畫的過渡（過程） */ /* .v-leave-active { transition: opacity 3s ease-in; // 單獨寫可以自定義過渡效果的不同 } */ /* 結束時候 */ .v-leave-to { opacity: 0; } /* --------------------上面的.v-enter-active .v-leave-active 可以放在一起寫----------------------- */ .v-enter-active, .v-leave-active{ transition: opacity 3s ease-out; } </style>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素，單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 動畫效果動畫只需要依賴 **.v-enter-active** 與 **.v-leave-active** 以及一個寫好的 **@keyframes** 關鍵幀動畫，即可完成一個動畫的效果。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>動畫效果</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場動畫的過渡（過程） */ .v-enter-active { animation: shake 3s; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡（過程） */ .v-leave-active { animation: shake 3s; } </style>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素，單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 給class重命名上面的 **動畫類名** 都是 **.v-enter-to** 或 **v-enter-from**，都是以 **v** 開頭，其實我們是可以給這個 **class 重命名** 的，只需要給 **transition標簽** ，添加一個 **name屬性** 即可。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>給class重命名</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場動畫的過渡（過程） */ .hello-enter-active { animation: shake 3s; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡（過程） */ .hello-leave-active { animation: shake 3s; } </style>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素，單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition name="hello"> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ 注意：上面的動畫不僅可以使用 **v-if** 來控制，也可以使用 **v-show** 。 >[success] ## 自定義class 同時這個 **transition標簽** 的 **class** 也支持 **自定義class** ，自己來依自己的習慣叫自己喜歡的名字，例如想修改 **.v-enter-active** 這個類名，只需要在 **transition標簽** 上添加 **enter-active-class** 屬性來自定義類名即可 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定義class</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場動畫的過渡（過程） */ .hello { animation: shake 3s; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡（過程） */ .bay { animation: shake 3s; } </style>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素，單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition enter-active-class="hello" leave-active-class="bay" > <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 自定義class結合animate.css使用 **animate.css** 的具體使用教程，請[點擊這里](https://animate.style/) 首先 **通過cdn** 的方式引入 **animate.css** ，在使用**animate.css**中的 **任何class動畫類名** 都需要與 **animate__animated** 類名一同使用，而且配合使用 **自定義class** ，可以很方便的 **和第三方的動畫庫相結合** ，例子如下： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定義class結合animate.css使用</title>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素，單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition enter-active-class="animate__animated animate__backInDown" leave-active-class="animate__animated animate__flash" > <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 過渡與動畫同時觸發有些時候我們 **不僅希望只有在顯示隱藏元素的瞬間有過渡的效果，我們同時希望有動畫的效果** ，我們可能還想讓 **字體顏色** 也有改變的效果，或者 **坐標位置** 有所改變，等等一系列更多的效果，下面的代碼在有 **過渡** 的同時候也改變了 **字體顏色** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>過渡與動畫同時觸發</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場效果*/ .v-enter-from{ color: red; } /* 入場動畫的過渡（過程） */ .v-enter-active { animation: shake 3s; transition: color 3s ease-in; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡（過程） */ .v-leave-active { color: red; animation: shake 3s; transition: all 3s ease-in; } </style>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素，單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 根據animation或transition來決定動畫執行時間接下來看我們的代碼中 **animation** 的過渡效果是 **10s** ， **transition** 的動畫效果是 **3s**，這樣動畫就會出現 **3s** 的先執行結束，然后漫長的等 **10s** 的過渡效果 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>根據animation或transition來決定動畫執行時間</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場效果*/ .v-enter-from{ color: red; } /* 入場動畫的過渡（過程） */ .v-enter-active { animation: shake 10s; transition: color 3s ease-in; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡（過程） */ .v-leave-active { color: red; animation: shake 10s; transition: all 3s ease-in; } </style>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素，單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ 假如我們有一個需求，想讓 **過渡時間與動畫時間相同，或動畫時間與過渡時間相同** ，該怎么做呢？我們只需要在 **transition標簽** 上添加一個 **type** 屬性， **type** 屬性等于 **transition** 時，就是 **以過渡效果的時間為準** ， **type** 屬性等于 **animation** 時，就是 **以動畫效果的時間為準** ，代碼如下： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>根據animation或transition來決定動畫執行時間</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場效果*/ .v-enter-from{ color: red; } /* 入場動畫的過渡（過程） */ .v-enter-active { animation: shake 3s; transition: color 10s ease-in; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡（過程） */ .v-leave-active { color: red; animation: shake 3s; transition: color 10s ease-in; } </style>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素，單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition type="animation"> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## duration（持續時間）屬性像上面的 **根據animation或transition來決定動畫執行時間例子** 很不易懂，我們通過使用 **duration屬性實現同樣的效果** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>duration（持續時間）屬性</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場效果*/ .v-enter-from{ color: red; } /* 入場動畫的過渡（過程） */ .v-enter-active { animation: shake 3s; transition: color 10s ease-in; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡（過程） */ .v-leave-active { color: red; animation: shake 3s; transition: color 10s ease-in; } </style>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素，單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition :duration="1000"> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ **:duration="1000"** 的意思就是不論是 **過渡時間** 還是 **動畫時間** ，都執行 **1000毫秒（1秒）** ，雖然 **css樣式** 中寫了 **3s** 與 **10s** ，我只執行 **duration** 屬性設置的 **1s** 。 **duration屬性** 的值也可以設置為 **對象形式** ，**:duration="{ enter:1000, leave: 3000 }"** 意思是 **入場動畫1秒，出場動畫3秒** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>duration（持續時間）屬性</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場效果*/ .v-enter-from{ color: red; } /* 入場動畫的過渡（過程） */ .v-enter-active { animation: shake 3s; transition: color 10s ease-in; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡（過程） */ .v-leave-active { color: red; animation: shake 3s; transition: color 10s ease-in; } </style>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素，單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition :duration="{ enter:1000, leave: 3000 }"> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 用 js 做動畫我們上面講解的，還是 **使用css做動畫** ，那我們如何使用 **js** 去做動畫呢，首先在 **transition標簽** 上添加 **:css="false"** ，意思就是不使用 **transition** 來做 **css動畫** ，然后做 **js動畫**的話， **vue** 提供給了我們一些 **鉤子（某些時刻會自動調用的函數）** ，如下表格： | 鉤子名稱 | 鉤子說明 | 回調參數說明 | | --- | --- | --- | | **入場動畫鉤子**： | | | @before-enter | 進入入場動畫之前時 | **參數1：el：vue返回的dom元素** | | @enter | 開始執行入場動畫時 | **參數1：el：vue返回的dom元素<br>參數2：done： done方法可以停止動畫** | | @after-enter | 入場動畫結束時 | **參數1：el：vue返回的dom元素** | | **出場動畫鉤子**： | | | @before-leave | 出場動畫之前時 | **參數1：el：vue返回的dom元素** | | @leave | 開始執行出場動畫時 | **參數1：el：vue返回的dom元素<br>參數2：done： done方法可以停止動畫** | | @after-leave | 出場動畫結束時 | **參數1：el：vue返回的dom元素** | 具體例子使用方法如下： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>duration（持續時間）屬性</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場效果*/ .v-enter-from{ color: red; } /* 入場動畫的過渡（過程） */ .v-enter-active { animation: shake 3s; transition: color 10s ease-in; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡（過程） */ .v-leave-active { color: red; animation: shake 3s; transition: color 10s ease-in; } </style>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素，單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show }, /** * 進入入場動畫之前時 * @param {Object} el - vue傳遞過來的dom元素 */ // ------------------------入場動畫--------------------------- handleBeforeEnter(el){ el.style.color = 'red' }, /** * 開始執行入場動畫時 * @param {Object} el - vue傳遞過來的dom元素 * @param {Funcion} done - done方法可以停止動畫 */ handleEnterActive(el, done){ // 執行動畫 const animate = setInterval(() => { const color = el.style.color if(color === 'red') { el.style.color = 'green' } else { el.style.color = 'red' } }, 1000); // 3秒后清除動畫 setTimeout(() => { clearInterval(animate) // 1. 注意：如果不主動調用done方法，程序不會知道動畫是否結束， // 也不會去走【動畫結束的鉤子函數】 done() }, 3000); }, /** * 入場動畫結束時 */ handleEnterEnd(){ // 2. 上面的方法中調用【done】后，才會執行該方法中的邏輯 alert('入場動畫結束時') }, // ------------------------出場動畫--------------------------- /** * 出場動畫之前時 * @param {Object} el - vue傳遞過來的dom元素 */ handleBeforeLeave(el){ alert('出場動畫之前') }, /** * 開始執行出場動畫時 * @param {Object} el - vue傳遞過來的dom元素 * @param {Funcion} done - done方法可以停止動畫 */ handleLeaveActive(el, done){ alert('開始執行出場動畫') done() }, /** * 出場動畫結束時 */ handleLeaverEnd(el){ alert('出場動畫結束') } }, template: ` <div> <transition :css="false" @before-enter="handleBeforeEnter" @enter="handleEnterActive" @after-enter="handleEnterEnd" @before-leave="handleBeforeLeave" @leave="handleLeaveActive" @after-leave="handleLeaverEnd" > <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~