Vue3 現(xiàn)實(shí)生活的過(guò)渡和微互動(dòng)
Vue為處理動(dòng)畫(huà)提供了一種簡(jiǎn)單而優(yōu)雅的方式。我們可以通過(guò)添加一個(gè) <transition /> 指令來(lái)輕松應(yīng)用它們，這個(gè)指令會(huì)為我們完成所有繁重的工作?；蛘撸憧梢岳胘avascript鉤子將更復(fù)雜的邏輯融入到你的動(dòng)畫(huà)中，甚至可以添加像gsap這樣的第三方庫(kù)，以應(yīng)對(duì)更高級(jí)的使用場(chǎng)景。
在這篇文章中，我們將探討這些不同的選項(xiàng)，但首先，讓我們暫時(shí)把Vue放在一邊，來(lái)談?wù)凜SS過(guò)渡和動(dòng)畫(huà)之間的區(qū)別。
過(guò)渡效果 Vs 動(dòng)畫(huà)效果
轉(zhuǎn)換是在兩個(gè)不同的狀態(tài)之間進(jìn)行的。起始狀態(tài)和結(jié)束狀態(tài)。就像模態(tài)組件一樣，起始狀態(tài)可能是隱藏的，而結(jié)束狀態(tài)可能是可見(jiàn)的。設(shè)置了這些狀態(tài)，瀏覽器會(huì)用一系列中間幀填充這種狀態(tài)變化。
button {
background-color: #0ff1ce;
transition: background-color 0.3s ease-in;
}
button:hover {
background-color: #c0ffee;
}如果你想執(zhí)行一些不明確涉及起始狀態(tài)和結(jié)束狀態(tài)的操作，或者你需要對(duì)過(guò)渡中的關(guān)鍵幀有更細(xì)致的控制，那么你就必須使用動(dòng)畫(huà)。
如果你想執(zhí)行一些不明確涉及起始狀態(tài)和結(jié)束狀態(tài)的操作，或者你需要對(duì)過(guò)渡中的關(guān)鍵幀有更細(xì)致的控制，那么你就必須使用 animation。
button:hover {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: wobble;
}
@keyframes wobble {
0%,
100% {
transform: translateX(0%);
transform-origin: 50% 50%;
}
15% {
transform: translateX(-32px) rotate(-6deg);
}
30% {
transform: translateX(16px) rotate(6deg);
}
45% {
transform: translateX(-16px) rotate(-3.6deg);
}
60% {
transform: translateX(10px) rotate(2.4deg);
}
75% {
transform: translateX(-8px) rotate(-1.2deg);
}
}將會(huì)導(dǎo)致以下結(jié)果：
如果你考慮到許多屬性可以被動(dòng)畫(huà)化，一個(gè)元素可以應(yīng)用多個(gè)動(dòng)畫(huà)，而且可以使用javascript來(lái)控制它們，那么動(dòng)畫(huà)的可能性就是無(wú)窮無(wú)盡的。
Vue.js 過(guò)渡指令
在Vue.js項(xiàng)目中，我們可以輕松地通過(guò)使用內(nèi)置的過(guò)渡指令來(lái)使用過(guò)渡和動(dòng)畫(huà)。在動(dòng)畫(huà)過(guò)程中，Vue會(huì)向封閉的元素添加適當(dāng)?shù)念悺?/p>
Transition Classes
Enter 進(jìn)入
- v-enter-from : 初始狀態(tài)。
- v-enter-active : 活躍狀態(tài)。在整個(gè)動(dòng)畫(huà)階段中應(yīng)用。
- v-enter-to : 結(jié)束狀態(tài)。
Leave 離開(kāi)
- v-leave-from : 初始狀態(tài)。
- v-leave-active : 請(qǐng)假的活動(dòng)狀態(tài)。在整個(gè)動(dòng)畫(huà)階段都會(huì)應(yīng)用。
- v-leave-to : 結(jié)束狀態(tài)。
在命名過(guò)渡的情況下，名稱將替換 v- 前綴。
起初，這對(duì)我來(lái)說(shuō)有些混亂，但當(dāng)我們深入研究代碼時(shí)，一切都會(huì)變得更容易理解。讓我們從例子開(kāi)始吧。
動(dòng)畫(huà)示例
些標(biāo)記的瑣碎部分為了簡(jiǎn)潔而省略，但包括現(xiàn)場(chǎng)演示在內(nèi)的所有內(nèi)容都可以在github上找到。
帶淡入淡出動(dòng)畫(huà)的切換
<button @click="toggle">Toggle</button>
<transition name="fade">
<div class="box" v-if="!isHidden"></div>
</transition>.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}帶滑動(dòng)動(dòng)畫(huà)的切換
.slide-enter-active {
transition-duration: 0.3s;
transition-timing-function: ease-in;
}
.slide-leave-active {
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.slide-enter-to,
.slide-leave-from {
overflow: hidden;
}
.slide-enter-from,
.slide-leave-to {
overflow: hidden;
height: 0;
}在兩個(gè)按鈕之間切換
<transition name="fade" mode="out-in">
<button @click="toggle" v-if="!isHidden" key="first">First State</button>
<button @click="toggle" v-else key="second">Second State</button>
</transition>.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}在兩種狀態(tài)之間切換
.bounce-enter-active {
animation: bounce 0.3s;
}
.bounce-leave-active {
animation: bounce 0.3s reverse;
}
@keyframes bounce {
0% {
transform: scale(1);
opacity: 0;
}
60% {
transform: scale(1.1);
}
100% {
transform: scale(1);
opacity: 1;
}
}列表添加、刪除與洗牌
.list-enter-active,
.list-leave-active {
transition: all 0.3s;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: scale(0);
}
/* Shuffle */
.list-move {
transition: transform 0.6s;
}Modal 模態(tài)
.modal-enter-from {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter-from .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}卡片動(dòng)畫(huà)
/* moving */
.slideLeft-move {
transition: all 0.6s ease-in-out 0.05s;
}
/* appearing */
.slideLeft-enter-active {
transition: all 0.4s ease-out;
}
/* disappearing */
.slideLeft-leave-active {
transition: all 0.2s ease-in;
position: absolute;
z-index: 0;
}
/* appear at / disappear to */
.slideLeft-enter-from,
.slideLeft-leave-to {
opacity: 0;
}展開(kāi)/折疊動(dòng)畫(huà)
.list-enter-active,
.list-leave-active {
transition: all 0.5s;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
height: 0;
}進(jìn)度動(dòng)畫(huà)
<div class="progress-steps">
<div class="progress">
<div class="percent" :style="{width: `${ (progress-1) * 30 }%`}"></div>
</div>
<div class="steps">
<div class="step" v-for="index in 4" @click="setProgress(index)" :key="index" :class="{'selected': progress === index,
'completed': progress > index }"></div>
</div>
</div>.container {
position: relative;
margin-top: 100px;
}
.progress-steps {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.steps {
position: relative;
display: flex;
justify-content: space-between;
width: 200px;
}
.step {
width: 20px;
height: 20px;
background: #ffffff;
border: 2px solid lightgray;
border-radius: 50%;
transition: all 0.6s;
cursor: pointer;
}
.step.selected {
border: 2px solid #42b983;
}
.step.completed {
border: 2px solid #42b983;
background: #42b983;
border-radius: inherit;
}
.step.completed:before {
font-family: "FontAwesome";
color: white;
content: "\f00c";
}
.progress {
position: absolute;
width: 100%;
height: 50%;
border-bottom: 2px solid lightgray;
z-index: -1;
}
.percent {
position: absolute;
width: 0;
height: 100%;
border-bottom: 2px solid #42b983;
z-index: 1;
transition: width 0.6s;
}導(dǎo)航動(dòng)畫(huà)
...
methods: {
navigateTo(item) {
const previousItem = this.$refs[`Item_${this.currentRoute.id}`];
const nextItem = this.$refs[`Item_${item.id}`];
this.currentRoute = item;
this.animateOut(previousItem);
this.animateIn(nextItem);
},
animateIn(item) {
this.tweenColor(item, {
backgroundColor: this.currentRoute.color,
color: "white"
});
this.tweenSize(item, 64);
},
animateOut(item) {
this.tweenColor(item, {
backgroundColor: "white",
color: "gray"
});
this.tweenSize(item, 32);
},
tweenColor(item, options) {
TweenMax.to(item, 0.3, options);
},
tweenSize(item, width) {
TweenMax.to(item, 0.7, {
width,
ease: Elastic.easeOut.config(1, 0.5)
});
}
}
...與Vue 2的區(qū)別
動(dòng)畫(huà)是受 Vue 3 遷移影響的眾多功能之一。遷移構(gòu)建并未將其報(bào)告為破壞性更改，這可能會(huì)引起混淆。
舊的課程看起來(lái)是這樣的：
如你所見(jiàn)， .v-enter 和 .v-leave 類現(xiàn)已被 .v-enter-from 和 .v-leave-from 替換。此外，控制動(dòng)畫(huà)類名的過(guò)渡元素屬性已從 enter-class 和 leave-class 更改為 enter-class-from 和 leave-class-from 。
Vue為我們的應(yīng)用程序提供了一種強(qiáng)大的方式來(lái)融入簡(jiǎn)單或復(fù)雜的動(dòng)畫(huà)。如果使用得當(dāng)，它們可以提升整體用戶體驗(yàn)，使界面更自然、更專業(yè)。但是，總是需要找到一個(gè)平衡，因?yàn)檫^(guò)多的動(dòng)畫(huà)可能會(huì)產(chǎn)生相反的效果。所以，請(qǐng)確保不要過(guò)度使用。
