徹底搞懂Transition內(nèi)置組件
前言
<Transition> 作為一個(gè) Vue 中的內(nèi)置組件，它可以將 進(jìn)入動畫 和 離開動畫 應(yīng)用到通過 默認(rèn)插槽 傳遞給目標(biāo)元素或組件上。
也許你有在使用，但是一直不清楚它的原理或具體實(shí)現(xiàn)，甚至不清楚其內(nèi)部提供的各個(gè) class 到底怎么配合使用，想看源碼又被其中各種引入搞得七葷八素...
本篇文章就以 Transition 組件為核心，探討其核心原理的實(shí)現(xiàn)，文中不會對其各個(gè)屬性再做額外解釋，畢竟這些看文檔就夠了，希望能夠給你帶來幫助！??！
Transition 內(nèi)置組件
觸發(fā)條件
<Transition> 組件的 進(jìn)入動畫 或 離開動畫 可通過以下的條件之一觸發(fā)：
- 由
v-if所觸發(fā)的切換 - 由
v-show所觸發(fā)的切換 - 由特殊元素
<component name="x">切換的動態(tài)組件 - 改變特殊的
key屬性
再分類
其實(shí)我們可以將以上情況進(jìn)行 再分類：
組件 掛載 和 銷毀
v-if的變化<component name="x">的變化key的變化
組件 樣式 屬性
display: none | x設(shè)置v-show的變化
【擴(kuò)展】v-if 和 v-for 一起使用時(shí)，在 Vue2 和 Vue3 中的不同
- 在 Vue2 中，當(dāng)它們處于同一節(jié)點(diǎn)時(shí)，
v-for的優(yōu)先級比v-if更高，即v-if將分別重復(fù)運(yùn)行于每個(gè)v-for循環(huán)中，也就是v-if可以正常訪問v-for中的數(shù)據(jù) - 在 Vue3 中，當(dāng)它們處于同一節(jié)點(diǎn)時(shí)，
v-if的優(yōu)先級比v-for更高，即此時(shí)只要v-if的值為false則 v-for 的列表就不會被渲染，也就是v-if不能訪問到v-for中的數(shù)據(jù)
六個(gè)過渡時(shí)機(jī)
總結(jié)起來就分為 進(jìn)入 和 離開 動畫的 初始狀態(tài)、生效狀態(tài)、結(jié)束狀態(tài)，具體如下：
v-enter-from- 進(jìn)入 動畫的 起始狀態(tài)
- 在元素插入之前添加，在元素插入完成后的 下一幀移除
v-enter-active- 進(jìn)入 動畫的 生效狀態(tài)，應(yīng)用于整個(gè)進(jìn)入動畫階段
- 在元素被插入之前添加，在過渡或動畫完成之后移除
- 這個(gè)
class可以被用來定義進(jìn)入動畫的持續(xù)時(shí)間、延遲與速度曲線類型
v-enter-to- 進(jìn)入 動畫的 結(jié)束狀態(tài)
- 在元素插入完成后的下一幀被添加 (也就是
v-enter-from被移除的同時(shí))，在過渡或動畫完成之后移除
v-leave-from- 離開 動畫的 起始狀態(tài)
- 在離開過渡效果被觸發(fā)時(shí)立即添加，在一幀后被移除
v-leave-active- 離開 動畫的 生效狀態(tài)，應(yīng)用于整個(gè)離開動畫階段
- 在離開過渡效果被觸發(fā)時(shí)立即添加，在 過渡或動畫完成之后移除
- 這個(gè)
class可以被用來定義離開動畫的持續(xù)時(shí)間、延遲與速度曲線類型
v-leave-to- 離開 動畫的 結(jié)束狀態(tài)
- 在一個(gè)離開動畫被觸發(fā)后的 下一幀 被添加 (即
v-leave-from被移除的同時(shí))，在 過渡或動畫完成之后移除
其中的 v 前綴是允許修改的，可以 <Transition> 組件傳一個(gè) name 的 prop 來聲明一個(gè)過渡效果名，如下就是將 v 前綴修改為 **`
modal `** 前綴：
<Transition name="modal"> ... </Transition>
Transition 組件 & CSS transition 屬性
以上這個(gè)簡單的效果，核心就是兩個(gè)時(shí)機(jī)：
v-enter-active進(jìn)入動畫的 生效狀態(tài)v-leave-active離開動畫的 生效狀態(tài)
再配合簡單的 CSS 過渡屬性就可以達(dá)到效果，代碼如下：
<template>
<div class="home">
<transition name="golden">
<!-- 金子列表 -->
<div class="golden-box" v-show="show">
<img
class="golden"
:key="idx"
v-for="idx in 3"
src="../assets/golden.jpg"
/>
</div>
</transition>
</div>
<!-- 錢袋子 -->
<img class="purse" @click="show = !show" src="../assets/purse.png" alt="" />
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
const show = ref(true)
</script>
<style lang="less" scoped>
.home {
min-height: 66px;
}
.golden-box {
transition: all 1s ease-in;
.golden {
width: 100px;
position: fixed;
transform: translate3d(0, 0, 0);
transition: all .4s;
&:nth-of-type(1) {
left: 45%;
top: 100px;
}
&:nth-of-type(2) {
left: 54%;
top: 50px;
}
&:nth-of-type(3) {
right: 30%;
top: 100px;
}
}
&.golden-enter-active {
.golden {
transform: translate3d(0, 0, 0);
transition-timing-function: cubic-bezier(0, 0.57, 0.44, 1.97);
}
.golden:nth-of-type(1) {
transition-delay: 0.1s;
}
.golden:nth-of-type(2) {
transition-delay: 0.2s;
}
.golden:nth-of-type(3) {
transition-delay: 0.3s;
}
}
&.golden-leave-active {
.golden:nth-of-type(1) {
transform: translate3d(150px, 140px, 0);
transition-delay: 0.3s;
}
.golden:nth-of-type(2) {
transform: translate3d(0, 140px, 0);
transition-delay: 0.2s;
}
.golden:nth-of-type(3) {
transform: translate3d(-100px, 140px, 0);
transition-delay: 0.1s;
}
}
}
.purse {
position: fixed;
width: 200px;
margin-top: 100px;
cursor: pointer;
}
</style>當(dāng)然動畫的效果是多種多樣的，不僅只是局限于這一種，例如可以配合：
- CSS 的 transition 過渡屬性（上述例子使用的方案）
- CSS 的 animation 動畫屬性
核心原理
通過上述內(nèi)容其實(shí)不難發(fā)現(xiàn)其核心原理就是：
- 當(dāng) 組件（DOM） 被 掛載 時(shí)，將過渡動效添加到該 DOM 元素上
- 當(dāng) 組件（DOM） 被 卸載 時(shí)，不是直接卸載，而是等待附加到 DOM 元素上的 動效執(zhí)行完成，然后在真正執(zhí)行卸載操作，即 延遲卸載時(shí)機(jī)
在上述的過程中，<Transition> 組件會為 目標(biāo)組件/元素 通過添加不同的 class 來定義 初始、生效、結(jié)束 三個(gè)狀態(tài)，當(dāng)進(jìn)入下一個(gè)狀態(tài)時(shí)會把上一個(gè)狀態(tài)對應(yīng)的 class 移除。
那么你可能會問了，v-show 的形式也不符合 掛載/卸載 的形式呀，畢竟它只是在修改 DOM 元素的 display: none | x 的樣式！
讓源碼中的注釋來回答：
v-if、<component name="x">、key 控制組件 顯示/隱藏 的方式是 掛載/卸載 組件，而 v-show 控制組件 顯示/隱藏 的方式是 修改/重置 display: none | x 屬性值，從本質(zhì)上看方式不同，但從結(jié)果上看都屬于控制組件的 顯示/隱藏，即功能是一致的，而這里所說的 掛載/卸載 是針對大部分情況來說的，畢竟四種觸發(fā)方式中就有三種符合此情況。
實(shí)現(xiàn) Transition 組件
所謂 Transition 組件畢竟是 Vue 的內(nèi)置組件，換句話說，組件的編寫要符合 Vue 的規(guī)范（即 聲明式寫法），但為了更好的理解核心原理，我們應(yīng)該從 原生 DOM 的過渡開始（即 命令式寫法）探討。
原生 DOM 如何實(shí)現(xiàn)過渡？
所謂的 過渡動效 本質(zhì)上就是一個(gè) DOM 元素在 兩種狀態(tài)間的轉(zhuǎn)換，瀏覽器 會根據(jù)我們設(shè)置的過渡效果 自行完成 DOM 元素的過渡。
而 狀態(tài)的轉(zhuǎn)換 指的就是 初始化狀態(tài) 和 結(jié)束狀態(tài) 的轉(zhuǎn)換，并且配合 CSS 中的 transition 屬性就可以實(shí)現(xiàn)兩個(gè)狀態(tài)間的過渡，即 運(yùn)動過程。
原生 DOM 元素移動示例
假設(shè)要為一個(gè)元素在垂直方向上添加進(jìn)場動效：從 原始位置 向上移動 200px 的位置，然后在 1s 內(nèi)運(yùn)動回 原始位置。
進(jìn)場動效
用 CSS 描述
// 描述物體
.box {
width: 100px;
height: 100px;
background-color: red;
box-shadow: 0 0 8px;
border-radius: 50%;
}
// 初始狀態(tài)
.enter-from {
transform: translateY(-200px);
}
// 運(yùn)動過程
.enter-active {
transition: transform 1s ease-in-out;
}
// 結(jié)束狀態(tài)
.enter-to {
transform: translateY(0);
}用 JavaScript 描述
// 創(chuàng)建元素
const div = document.createElement('div')
div.classList.add('box')
// 添加 初始狀態(tài) 和 運(yùn)動過程
div.classList.add('enter-from')
div.classList.add('enter-active')
// 將元素添加到頁面上
document.body.appendChild(div)
// 切換元素狀態(tài)
div.classList.remove('enter-from')
div.classList.add('enter-to')從 命令式編程 的步驟上來看，似乎每一步都沒有問題，但實(shí)際的過渡動畫是不會生效的，雖然在代碼中我們有 狀態(tài)的切換，但這個(gè)切換的操作對于 瀏覽器 來講是在 同一幀中進(jìn)行的，所以只會渲染 最終狀態(tài)，即 enter-to 類所指向的狀態(tài)。
requestAnimationFrame 實(shí)現(xiàn)下一幀的變化
window.requestAnimationFrame(callback) 會在瀏覽器在 下次重繪之前 調(diào)用指定的 回調(diào)函數(shù) 用于更新動畫。
也就是說，單個(gè)的 requestAnimationFrame() 方法是在 當(dāng)前幀 中執(zhí)行的，也就是如果想要在 下一幀 中執(zhí)行就需要使用兩個(gè) requestAnimationFrame() 方法嵌套的方式來實(shí)現(xiàn)，如下：
// 嵌套的 requestAnimationFrame 實(shí)現(xiàn)在下一幀中，切換元素狀態(tài)
requestAnimationFrame(() => {
requestAnimationFrame(() => {
div.classList.remove("enter-from");
div.classList.add("enter-to");
});
});transitionend 事件監(jiān)聽動效結(jié)束
以上就完成元素的 進(jìn)入動效，那么在動效結(jié)束之后，別忘了將原本和 進(jìn)入動效 相關(guān)的 類 移除掉，可以通過 transitionend 事件 監(jiān)聽動效是否結(jié)束，如下
// 嵌套的 requestAnimationFrame 實(shí)現(xiàn)在下一幀中，切換元素狀態(tài)
requestAnimationFrame(() => {
requestAnimationFrame(() => {
div.classList.remove("enter-from");
div.classList.add("enter-to");
// 動效結(jié)束后，移除和動效相關(guān)的類
div.addEventListener("transitionend", () => {
div.classList.remove("enter-to");
div.classList.remove("enter-active");
});
});
});以上就是 進(jìn)場動效 的實(shí)現(xiàn)，如下：
離場動效
有了進(jìn)場動效的實(shí)現(xiàn)過程，在定義 離場動效 時(shí)就可以選擇和 進(jìn)場動效 相對應(yīng)的形式，即 初始狀態(tài)、過渡過程、結(jié)束狀態(tài)。
用 CSS 描述
// 初始狀態(tài)
.leave-from {
transform: translateY(0);
}
// 過渡狀態(tài)
.leave-active {
transition: transform 2s ease-out;
}
// 結(jié)束狀態(tài)
.leave-to {
transform: translateY(-300px);
}用 JavaScript 描述
所謂的 離場 就是指 DOM 元素 的 卸載，但因?yàn)橐须x場動效要展示，所以不能直接卸載對應(yīng)的元素，而是要 等待離場動效結(jié)束之后在進(jìn)行卸載。
為了直觀一些，我們可以添加一個(gè)離場的按鈕，用于觸發(fā)離場動效。
// 創(chuàng)建離場按鈕
const btn = document.createElement("button");
btn.innerText = "離場";
document.body.appendChild(btn);
// 綁定事件
btn.addEventListener("click", () => {
// 設(shè)置離場 初始狀態(tài) 和 運(yùn)動過程
div.classList.add("leave-from");
div.classList.add("leave-active");
// 嵌套的 requestAnimationFrame 實(shí)現(xiàn)在下一幀中，切換元素狀態(tài)
requestAnimationFrame(() => {
requestAnimationFrame(() => {
div.classList.remove("leave-from");
div.classList.add("leave-to");
// 動效結(jié)束后，移除和動效相關(guān)的類
div.addEventListener("transitionend", () => {
div.classList.remove("leave-to");
div.classList.remove("leave-active");
// 離場動效結(jié)束，移除目標(biāo)元素
div.remove();
});
});
});
});離場動效，如下：
實(shí)現(xiàn) Transition 組件
以上的實(shí)現(xiàn)過程，可以將其進(jìn)行抽象化為三個(gè)階段：
- beforeEnter
- enter
- leave
現(xiàn)在要從 命令式編程 轉(zhuǎn)向 聲明式編程 了，因?yàn)槲覀円ゾ帉?nbsp;Vue 組件 了，即基于 VNode 節(jié)點(diǎn)來實(shí)現(xiàn)，為了和普通的 VNode 作為區(qū)分，Vue 中會為目標(biāo)元素的 VNode 節(jié)點(diǎn)上添加 transition 屬性：
Transition 組件本身不會渲染任何額外的內(nèi)容，它只是通過默認(rèn)插槽讀取過渡元素，并渲染需要過渡的元素Transition 組件作用，是在過渡元素的VNode節(jié)點(diǎn)上添加和transition相關(guān)的鉤子函數(shù)
<script lang="ts">
import { defineComponent } from 'vue';
const nextFrame = (callback: () => unknown) => {
requestAnimationFrame(() => {
requestAnimationFrame(callback)
})
}
export default defineComponent({
name: 'Transition',
setup(props, { slots }) {
// 返回 render 函數(shù)
return () => {
// 通過默認(rèn)插槽，獲取目標(biāo)元素
const innerVNode = (slots as any).default()
// 為目標(biāo)元素添加 transition 相關(guān)鉤子
innerVNode.transition = {
beforeEnter(el: any) {
console.log(111)
// 設(shè)置 初始狀態(tài) 和 運(yùn)動過程
el.classList.add("enter-from");
el.classList.add("enter-active");
},
enter(el: any) {
// 在下一幀切換狀態(tài)
nextFrame(() => {
// 切換狀態(tài)
el.classList.remove("enter-from");
el.classList.add("enter-to");
// 動效結(jié)束后，移除和動效相關(guān)的類
el.addEventListener("transitionend", () => {
el.classList.remove("enter-to");
el.classList.remove("enter-active");
});
})
},
leave(el: any) {
// 設(shè)置離場 初始狀態(tài) 和 運(yùn)動過程
el.classList.add("leave-from");
el.classList.add("leave-active");
// 在下一幀中，切換元素狀態(tài)
nextFrame(() => {
// 切換元素狀態(tài)
el.classList.remove("leave-from");
el.classList.add("leave-to");
// 動效結(jié)束后，移除和動效相關(guān)的類
el.addEventListener("transitionend", () => {
el.classList.remove("leave-to");
el.classList.remove("leave-active");
// 離場動效結(jié)束，移除目標(biāo)元素
el.remove();
});
})
}
}
// 返回修改過的 VNode
return innerVNode
}
}
})
</script>最后
從整體來看，Transition 組件 的核心并不算復(fù)雜，特別是以 命令式編程 實(shí)現(xiàn)之后，但話說回來在 Vue 源碼中實(shí)現(xiàn)的還是很全面的，比如：
- 提供
props實(shí)現(xiàn)用戶自定義類名 - 提供 內(nèi)置模式，即先進(jìn)后出（
in-out）、后進(jìn)先出（enter-to） - 支持 v-show 方式觸發(fā)過渡效果
以上就是徹底搞懂Transition內(nèi)置組件的詳細(xì)內(nèi)容，更多關(guān)于Transition內(nèi)置組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
在 Vue 3 中設(shè)置 `@` 指向根目錄的幾種常見方法匯總
在 Vue 3 項(xiàng)目開發(fā)中,為了方便管理和引用文件路徑,設(shè)置 @ 指向根目錄是一項(xiàng)常見的需求,下面給大家分享在Vue3中設(shè)置 `@` 指向根目錄的方法匯總,感興趣的朋友一起看看吧2024-06-06
Vue2?this?能夠直接獲取到?data?和?methods?的原理分析
這篇文章主要介紹了Vue2?this能夠直接獲取到data和methods的原理分析，因?yàn)閙ethods里的方法通過bind指定了this為new?Vue的實(shí)例2022-06-06
教你如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境
這篇文章主要介紹了如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境,文中給大家提到了如何讓 Vite 加載 Electron 的內(nèi)置模塊和 Node.js 的內(nèi)置模塊，需要的朋友可以參考下2022-11-11
如何在Vue3和Vite項(xiàng)目中用SQLite數(shù)據(jù)庫進(jìn)行數(shù)據(jù)存儲
SQLite是一種嵌入式關(guān)系型數(shù)據(jù)庫管理系統(tǒng),是一個(gè)零配置、無服務(wù)器的、自給自足的、事務(wù)性的SQL數(shù)據(jù)庫引擎,這篇文章主要給大家介紹了關(guān)于如何在Vue3和Vite項(xiàng)目中用SQLite數(shù)據(jù)庫進(jìn)行數(shù)據(jù)存儲的相關(guān)資料,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue keep-alive多層級路由支持,在文章開頭給大家介紹了keep-alive使用問題，解決使用keep-alive include屬性問題，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue項(xiàng)目中引入js-base64方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
基于Vue2實(shí)現(xiàn)動態(tài)折扣表格
這篇文章主要為大家詳細(xì)介紹了如何基于Vue2實(shí)現(xiàn)動態(tài)折扣表格,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
Vue項(xiàng)目引入translate.js國際化自動翻譯組件的方法
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目引入translate.js國際化自動翻譯組件的相關(guān)資料,除了基本的文本翻譯功能之外,jstranslate還提供了一些高級功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
系統(tǒng)頂部展示一個(gè)橫向滾動的消息通知,就是消息內(nèi)容從右往左一直滾動,這篇文章主要介紹了vue頂部消息橫向滾動通知,需要的朋友可以參考下2024-02-02
vue在自定義組件中使用v-model進(jìn)行數(shù)據(jù)綁定的方法
這篇文章主要介紹了vue在自定義組件中使用v-model進(jìn)行數(shù)據(jù)綁定的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03