Vue 提供了一種簡(jiǎn)單優(yōu)雅的處理動(dòng)畫(huà)的方法。你可以通過(guò)添加一個(gè)指令輕松應(yīng)用它們，該指令為你完成所有繁重的工作。或者，你可以利用 JavaScript 鉤子將更復(fù)雜的邏輯納入你的動(dòng)畫(huà)中，甚至可以添加第三方庫(kù)（如 gsap）以實(shí)現(xiàn)更高級(jí)的用例。
在本文中，我們將研究這些不同的選項(xiàng)，但首先，讓我們暫時(shí)將 Vue.js 放在一邊，討論 CSS 過(guò)渡和動(dòng)畫(huà)之間的差異。
過(guò)渡與動(dòng)畫(huà)
過(guò)渡是在兩個(gè)不同狀態(tài)之間進(jìn)行的。開(kāi)始狀態(tài)和結(jié)束狀態(tài)。例如，對(duì)于模態(tài)組件，開(kā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)的操作，或者你需要更精細(xì)地控制過(guò)渡中的關(guān)鍵幀，那么你必須使用動(dòng)畫(huà)。
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);
}
}結(jié)果：
如果考慮到可以動(dòng)畫(huà)化許多屬性，可以將多個(gè)動(dòng)畫(huà)應(yīng)用于一個(gè)元素，并且可以使用javascript來(lái)控制它們，那么動(dòng)畫(huà)的可能性就無(wú)窮無(wú)盡。
要了解更多信息，請(qǐng)閱讀關(guān)于使用CSS動(dòng)畫(huà)（MDN）的文章，并嘗試使用這個(gè)CSS動(dòng)畫(huà)生成器進(jìn)行操作。
通過(guò)使用內(nèi)置的 transition 指令，可以輕松地在 Vue.js 項(xiàng)目中使用過(guò)渡和動(dòng)畫(huà)。在動(dòng)畫(huà)過(guò)程中，Vue 會(huì)為封閉的元素添加適當(dāng)?shù)念?lèi)。
Transition Classes
Enter
- v-enter-from：起始狀態(tài)。
- v-enter-active：活動(dòng)狀態(tài)。在整個(gè)動(dòng)畫(huà)階段都會(huì)應(yīng)用。
- v-enter-to：結(jié)束狀態(tài)。
Leave
- v-leave-from：起始狀態(tài)。
- v-leave-active：離開(kāi)的活動(dòng)狀態(tài)。在整個(gè)動(dòng)畫(huà)階段都會(huì)應(yīng)用。
- v-leave-to：結(jié)束狀態(tài)。
在命名過(guò)渡的情況下，名稱(chēng)將替換 v- 前綴。
起初，這對(duì)我來(lái)說(shuō)有些令人困惑，但當(dāng)我們深入代碼時(shí)，一切都會(huì)更容易理解。讓我們從例子開(kāi)始。
動(dòng)畫(huà)示例
為了簡(jiǎn)潔起見(jiàn)，一些標(biāo)記的細(xì)節(jié)被省略，但所有內(nèi)容包括實(shí)時(shí)演示都可在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à)的切換
在兩個(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>
<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>
在兩個(gè)國(guó)家之間切換
.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
.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à)
This example heavily levarages javascript and the gsap library source code
與Vue 2的區(qū)別
動(dòng)畫(huà)是受 Vue 3 遷移影響的眾多功能之一。遷移構(gòu)建不會(huì)將其報(bào)告為重大更改，這可能會(huì)令人困惑。
舊類(lèi)如下：
正如你所看到的，.v-enter和.v-leave類(lèi)現(xiàn)在被.v-enter-from和.v-leave-from替換了。此外，控制動(dòng)畫(huà)類(lèi)名的過(guò)渡元素props的名稱(chēng)從enter-class和leave-class更改為enter-class-from和leave-class-from。
總結(jié)
本文介紹了Vue.js在現(xiàn)實(shí)生活中如何實(shí)現(xiàn)轉(zhuǎn)換和微交互的例子，以及這些功能是如何提高用戶(hù)體驗(yàn)的。作者指出，Vue.js是一個(gè)靈活的框架，可用于實(shí)現(xiàn)各種各樣的功能。文章中介紹了一些常見(jiàn)的轉(zhuǎn)換和微交互，如彈出窗口、拖動(dòng)、下拉刷新等，以及如何使用Vue.js實(shí)現(xiàn)這些效果。
文章強(qiáng)調(diào)了用戶(hù)體驗(yàn)的重要性，并提供了一些技巧，如利用動(dòng)畫(huà)和顏色來(lái)吸引用戶(hù)的注意力，提高用戶(hù)的參與度。作者還介紹了一些Vue.js插件和庫(kù)，如Vue-Router、Vuex和Axios，以及如何使用它們來(lái)簡(jiǎn)化代碼和提高效率。
最后，文章提醒讀者注意使用這些效果時(shí)的注意事項(xiàng)，如避免使用過(guò)多的動(dòng)畫(huà)和效果，以免降低性能和用戶(hù)體驗(yàn)。
本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。
