Enter & Leave Transitions
Vue.js 將過場漸變的效果包裝成一個獨立的 transition 元件, 再由開發者自行定義元素的進場 (Enter) 、退場 (Leave) 以及動畫過程漸變 (Transitions) 的樣式。動畫執行完後才會把 DOM 元素拔掉
元素進場 (顯示) :
v-enter-from: 進入的開始狀態。在插入元素之前添加,在插入元素之後刪除一幀。
v-enter-active: 進入的活動狀態。在整個進入階段應用。在插入元素之前添加,在過渡/動畫結束時將其刪除。此類可用於定義進入過渡的持續時間,延遲和緩和曲線。
v-enter-to: 進入的結束狀態。元素插入後添加了一幀(同時 v-enter-from 刪除),過渡/動畫結束後刪除。
元素退場 (消失) :
v-leave-from: 離開的開始狀態。觸發離開過渡時立即添加,在一幀後移除。
v-leave-active: 離開的活動狀態。在整個離開階段應用。觸發離開過渡時立即添加,當過渡/動畫結束時將其移除。此類可用於定義離開過渡的持續時間,延遲和緩和曲線。
v-leave-to: 離開的結束狀態。觸發離開過渡(同時 v-leave-from 刪除)後添加一幀,在過渡/動畫結束時刪除。
範例一: 淡入淡出
transition 定義 name=”fade”,style 將會加入 fade 樣式
1 2 3 4 5 6 7 8 9
| import { ref } from "vue"; export default { setup() { const isAmin = ref(false); return { isAmin, }; }, };
|
1 2 3 4 5 6
| <div id="demo"> <button @click="isAmin = !isAmin">Toggle</button> <transition name="fade"> <div v-if="isAmin" class="box"></div> </transition> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| .fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.box { width: 100px; height: 100px; background-color: blue; }
|
範例二: 使用 keyframes 做 bounce 動畫
1 2 3 4 5 6 7 8 9
| import { ref } from "vue"; export default { setup() { const isAmin = ref(false); return { isAmin, }; }, };
|
1 2 3 4 5 6
| <div id="demo"> <button @click="isAmin = !isAmin">Toggle</button> <transition name="bounce"> <div v-if="isAmin" class="box"></div> </transition> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| .bounce-enter-active { animation: bounce-in 0.5s; } .bounce-leave-active { animation: bounce-in 0.5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } } .box { width: 100px; height: 100px; background-color: blue; }
|
有 v-for 時需用 transition-group
1 2 3 4 5 6 7 8 9
| <div id="list-demo"> <button v-on:click="add">Add</button> <button v-on:click="remove">Remove</button> <transition-group name="list" tag="p"> <span v-for="item in items" v-bind:key="item" class="list-item"> {{ item }} </span> </transition-group> </div>
|
Hey!想學習更多前端知識嗎?
最近 Lala 開了前端課程 👉
【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手,又或是想學 RWD 的初學者,
我們將帶你從零開始,深入了解並掌握 RWD 響應式網頁設計的核心技術,快來一起看看吧 😊
🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住
如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。