建站
咨詢
售后
建站咨詢
新聞中心
在插入、更新或從 DOM 中移除項時，Vue 提供了多種應(yīng)用轉(zhuǎn)換效果的方法。這包括以下工具：
成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)服務(wù)團隊是一支充滿著熱情的團隊，執(zhí)著、敏銳、追求更好，是創(chuàng)新互聯(lián)的標(biāo)準(zhǔn)與要求，同時竭誠為客戶提供服務(wù)是我們的理念。創(chuàng)新互聯(lián)把每個網(wǎng)站當(dāng)做一個產(chǎn)品來開發(fā)，精雕細(xì)琢，追求一名工匠心中的細(xì)致，我們更用心！
- 自動為 CSS 轉(zhuǎn)換和動畫應(yīng)用 class；
- 集成第三方 CSS 動畫庫，例如 animate.css ；
- 在過渡鉤子期間使用 JavaScript 直接操作 DOM；
- 集成第三方 JavaScript 動畫庫。
在這里，我們只會講到進入、離開和列表的過渡，你也可以看下一節(jié)的管理過渡狀態(tài) 。
#單元素/組件的過渡
Vue 提供了 transition 的封裝組件，在下列情形中，可以給任何元素和組件添加進入/離開過渡
- 條件渲染 (使用
v-if) - 條件展示 (使用
v-show) - 動態(tài)組件
- 組件根節(jié)點
這里是一個典型的例子：
hello
const Demo = {
data() {
return {
show: true
}
}
}
Vue.createApp(Demo).mount('#demo').fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}點擊此處實現(xiàn)
當(dāng)插入或刪除包含在 transition 組件中的元素時，Vue 將會做以下處理：
- 自動嗅探目標(biāo)元素是否應(yīng)用了 CSS 過渡或動畫，如果是，在恰當(dāng)?shù)臅r機添加/刪除 CSS 類名。
- 如果過渡組件提供了 JavaScript 鉤子函數(shù) ，這些鉤子函數(shù)將在恰當(dāng)?shù)臅r機被調(diào)用。
- 如果沒有找到 JavaScript 鉤子并且也沒有檢測到 CSS 過渡/動畫，DOM 操作 (插入/刪除) 在下一幀中立即執(zhí)行。(注意：此指瀏覽器逐幀動畫機制，和 Vue 的
nextTick概念不同)
#過渡class
在進入/離開的過渡中，會有 6 個 class 切換。
v-enter-from：定義進入過渡的開始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。v-enter-active：定義進入過渡生效時的狀態(tài)。在整個進入過渡的階段中應(yīng)用，在元素被插入之前生效，在過渡/動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數(shù)。v-enter-to：定義進入過渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時v-enter-from被移除)，在過渡/動畫完成之后移除。v-leave-from：定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時立刻生效，下一幀被移除。v-leave-active：定義離開過渡生效時的狀態(tài)。在整個離開過渡的階段中應(yīng)用，在離開過渡被觸發(fā)時立刻生效，在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數(shù)。v-leave-to：離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效 (與此同時v-leave-from被刪除)，在過渡/動畫完成之后移除。
對于這些在過渡中切換的類名來說，如果你使用一個沒有名字的 v- 是這些class名的默認(rèn)前綴。如果你使用了 v-enter-from會替換為 my-transition-enter-from。
v-enter-active 和 v-leave-active 可以控制進入/離開過渡的不同的緩和曲線，在下面章節(jié)會有個示例說明。
#CSS 過渡
常用的過渡都是使用 CSS 過渡。
hello
const Demo = {
data() {
return {
show: true
}
}
}
Vue.createApp(Demo).mount('#demo')/* 可以設(shè)置不同的進入和離開動畫 */
/* 設(shè)置持續(xù)時間和動畫函數(shù) */
.slide-fade-enter-active {
transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateX(20px);
opacity: 0;
}點擊此處實現(xiàn)
#CSS 動畫
CSS 動畫用法同 CSS 過渡，區(qū)別是在動畫中 v-enter-from 類名在節(jié)點插入 DOM 后不會立即刪除，而是在 animationend 事件觸發(fā)時刪除。
下面是一個例子，為了簡潔起見，省略了帶前綴的 CSS 規(guī)則：
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis
enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi
tristique senectus et netus.
const Demo = {
data() {
return {
show: true
}
}
}
Vue.createApp(Demo).mount('#demo').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);
}
}點擊此處實現(xiàn)
#自定義過渡 class 類名
我們可以通過以下 attribute 來自定義過渡類名：
enter-from-classenter-active-classenter-to-classleave-from-classleave-active-classleave-to-class
他們的優(yōu)先級高于普通的類名，這對于 Vue 的過渡系統(tǒng)和其他第三方 CSS 動畫庫，如 Animate.css. 結(jié)合使用十分有用。
示例:
hello
const Demo = {
data() {
return {
show: true
}
}
}
Vue.createApp(Demo).mount('#demo')#同時使用過渡和動畫
Vue 為了知道過渡的完成，必須設(shè)置相應(yīng)的事件監(jiān)聽器。它可以是 transitionend 或 animationend，這取決于給元素應(yīng)用的 CSS 規(guī)則。如果你使用其中任何一種，Vue 能自動識別類型并設(shè)置監(jiān)聽。
但是，在一些場景中，你需要給同一個元素同時設(shè)置兩種過渡動效，比如 animation 很快的被觸發(fā)并完成了，而 transition 效果還沒結(jié)束。在這種情況中，你就需要使用 type attribute 并設(shè)置 animation 或 transition 來明確聲明你需要 Vue 監(jiān)聽的類型。
#顯性的過渡持續(xù)時間
在很多情況下，Vue 可以自動得出過渡效果的完成時機。默認(rèn)情況下，Vue 會等待其在過渡效果的根元素的第一個 transitionend 或 animationend 事件。然而也可以不這樣設(shè)定——比如，我們可以擁有一個精心編排的一系列過渡效果，其中一些嵌套的內(nèi)部元素相比于過渡效果的根元素有延遲的或更長的過渡效果。
在這種情況下你可以用 duration prop 定制一個顯性的過渡持續(xù)時間 (以毫秒計)：
... 你也可以定制進入和移出的持續(xù)時間：
... #JavaScript 鉤子
可以在 attribute 中聲明 JavaScript 鉤子
// ...
methods: {
// --------
// ENTERING
// --------
beforeEnter(el) {
// ...
},
// 當(dāng)與 CSS 結(jié)合使用時
// 回調(diào)函數(shù) done 是可選的
enter(el, done) {
// ...
done()
},
afterEnter(el) {
// ...
},
enterCancelled(el) {
// ...
},
// --------
// 離開時
// --------
beforeLeave(el) {
// ...
},
// 當(dāng)與 CSS 結(jié)合使用時
// 回調(diào)函數(shù) done 是可選的
leave(el, done) {
// ...
done()
},
afterLeave(el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled(el) {
// ...
}
}這些鉤子函數(shù)可以結(jié)合 CSS transitions/animations 使用，也可以單獨使用。
當(dāng)只用 JavaScript 過渡的時候，在 enter 和 leave 鉤中必須使用 done 進行回調(diào)。否則，它們將被同步調(diào)用，過渡會立即完成。添加 :css="false"，也會讓 Vue 會跳過 CSS 的檢測，除了性能略高之外，這可以避免過渡過程中 CSS 規(guī)則的影響。
現(xiàn)在讓我們來看一個例子。下面是一個使用 GreenSock 的 JavaScript 過渡:
Demo
const Demo = {
data() {
return {
show: false
}
},
methods: {
beforeEnter(el) {
gsap.set(el, {
scaleX: 0.8,
scaleY: 1.2
})
},
enter(el, done) {
gsap.to(el, {
duration: 1,
scaleX: 1.5,
scaleY: 0.7,
opacity: 1,
x: 150,
ease: 'elastic.inOut(2.5, 1)',
onComplete: done
})
},
leave(el, done) {
gsap.to(el, {
duration: 0.7,
scaleX: 1,
scaleY: 1,
x: 300,
ease: 'elastic.inOut(2.5, 1)'
})
gsap.to(el, {
duration: 0.2,
delay: 0.5,
opacity: 0,
onComplete: done
})
}
}
}
Vue.createApp(Demo).mount('#demo')點擊此處實現(xiàn)
#初始渲染的過渡
可以通過 appear attribute 設(shè)置節(jié)點在初始渲染的過渡
#多個元素的過渡
我們之后討論多個組件的過渡，對于原生標(biāo)簽可以使用 v-if/v-else。最常見的多標(biāo)簽過渡是一個列表和描述這個列表為空消息的元素：
Sorry, no items found.
實際上，通過使用多個 v-if 或?qū)蝹€元素綁定到一個動態(tài) property，可以在任意數(shù)量的元素之間進行過渡。例如：
也可以寫為：
// ...
computed: {
buttonMessage() {
switch (this.docState) {
case 'saved': return 'Edit'
case 'edited': return 'Save'
case 'editing': return 'Cancel'
}
}
}#過渡模式
這里還有一個問題，試著點擊下面的按鈕：
點擊此處實現(xiàn)
在“on”按鈕和“off”按鈕的過渡中，兩個按鈕都被重繪了，一個離開過渡的時候另一個開始進入過渡。這是
有時這很有效，例如當(dāng)過渡項絕對位于彼此的 top 時：
點擊此處實現(xiàn)
同時生效的進入和離開的過渡不能滿足所有要求，所以 Vue 提供了過渡模式
in-out: 新元素先進行過渡，完成之后當(dāng)前元素過渡離開。out-in: 當(dāng)前元素先進行過渡，完成之后新元素過渡進入。
TIP
很快就會發(fā)現(xiàn) out-in 是你大多數(shù)時候想要的狀態(tài) ????
現(xiàn)在讓我們用 out-in 更新 on/off 按鈕的轉(zhuǎn)換：
點擊此處實現(xiàn)
通過添加一個 attribute，我們修復(fù)了原來的過渡，而不必添加任何特殊 style。
我們可以用它來協(xié)調(diào)更具表現(xiàn)力的動作，例如折疊卡片，如下所示。實際上是兩個元素在彼此之間轉(zhuǎn)換，但是由于開始狀態(tài)和結(jié)束狀態(tài)的比例是相同的：水平為0，它看起來就像一個流體運動。這種輕描淡寫對于真實的 UI 微交互非常有用：
點擊此處實現(xiàn)
#多個組件之間過渡
組件之間的過渡更簡單 —— 我們甚至不需要 key 屬性。相反，我們包裝了一個動態(tài)組件 ：
const Demo = {
data() {
return {
view: 'v-a'
}
},
components: {
'v-a': {
template: 'Component A'
},
'v-b': {
template: 'Component B'
}
}
}
Vue.createApp(Demo).mount('#demo').component-fade-enter-active,
.component-fade-leave-active {
transition: opacity 0.3s ease;
}
.component-fade-enter-from,
.component-fade-leave-to {
opacity: 0;
}點擊此處實現(xiàn)
分享文章：創(chuàng)新互聯(lián)VUE3教程：Vue3.0進入過渡&離開過渡
文章位置：http://www.5511xx.com/article/cdgjiid.html
