建站
咨詢
售后
建站咨詢
新聞中心
Vue 提供了一些抽象概念，可以幫助處理過渡和動畫，特別是在響應(yīng)某些變化時。這些抽象的概念包括：
成都創(chuàng)新互聯(lián)公司成立于2013年，先為安澤等服務(wù)建站，安澤等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為安澤企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
- 在 CSS 和 JS 中，使用內(nèi)置的
- 過渡模式，以便你在過渡期間編排順序。
- 在處理多個元素位置更新時，使用
- 使用
watchers來處理應(yīng)用中不同狀態(tài)的過渡。
我們將在本指南接下來的三個部分中介紹所有這些以及更多內(nèi)容。然而，除了提供這些有用的 API 之外，值得一提的是，我們前面介紹的 class 和 style 聲明也可以應(yīng)用于動畫和過渡，用于更簡單的用例。
在下一節(jié)中，我們將回顧一些 web 動畫和過渡的基礎(chǔ)知識，并提供一些資源鏈接以進(jìn)行進(jìn)一步的研究。如果你已經(jīng)熟悉 web 動畫，并且了解這些原理如何與 Vue 的某些指令配合使用，可以跳過這一節(jié)。對于希望在開始學(xué)習(xí)之前進(jìn)一步了解網(wǎng)絡(luò)動畫基礎(chǔ)知識的其他人，請繼續(xù)閱讀。
#基于 class 的動畫和過渡
盡管
Push this button to do something you shouldn't be doing:
Oh no!
.shake {
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}const Demo = {
data() {
return {
noActivated: false
}
}
}
Vue.createApp(Demo).mount('#demo')點擊此處實現(xiàn)
#過渡與 Style 綁定
一些過渡效果可以通過插值的方式來實現(xiàn)，例如在發(fā)生交互時將樣式綁定到元素上。以這個例子為例：
Move your mouse across the screen...
x: {{x}}
.movearea {
transition: 0.2s background-color ease;
}const Demo = {
data() {
return {
x: 0
}
},
methods: {
xCoordinate(e) {
this.x = e.clientX
}
}
}
Vue.createApp(Demo).mount('#demo')點擊此處實現(xiàn)
在這個例子中，我們是通過使用插值來創(chuàng)建動畫，將觸發(fā)條件添加到鼠標(biāo)的移動過程上。同時將 CSS 過渡屬性應(yīng)用在元素上，讓元素知道在更新時要使用什么過渡效果。
#性能
你可能注意到上面顯示的動畫使用了 transforms 之類的東西，并應(yīng)用了諸如 perspective 之類的奇怪的 property——為什么它們是這樣實現(xiàn)的，而不是僅僅使用 margin 和 top 等？
我們可以通過對性能的了解，在 web 上創(chuàng)建極其流暢的動畫。我們希望盡可能對元素動畫進(jìn)行硬件加速，并使用不觸發(fā)重繪的 property。我們來介紹一下如何實現(xiàn)這個目標(biāo)。
#Transform 和 Opacity
我們可以通過工具，例如 CSS Triggers 來查看哪些屬性會在動畫時觸發(fā)重繪。在工具中，查看 transform 的相關(guān)內(nèi)容，你將看到：
非常好的是，更改 transform 不會觸發(fā)任何幾何形狀變化或繪制。這意味著該操作可能是由合成器線程在 GPU 的幫助下執(zhí)行。
opacity 屬性的行為也類似。因此，他們是在 web 上做元素移動的理想選擇。
#硬件加速
諸如 perspective、backface-visibility 和 transform:translateZ(x) 等 property 將讓瀏覽器知道你需要硬件加速。
如果要對一個元素進(jìn)行硬件加速，可以應(yīng)用以下任何一個 property (并不是需要全部，任意一個就可以)：
perspective: 1000px;
backface-visibility: hidden;
transform: translateZ(0);許多像 GreenSock 這樣的 JS 庫都會默認(rèn)你需要硬件加速，并在默認(rèn)情況下應(yīng)用，所以你不需要手動設(shè)置它們。
#Timing
對于簡單 UI 過渡，即從一個狀態(tài)到另一個沒有中間狀態(tài)的狀態(tài)，通常使用 0.1s 到 0.4s 之間的計時，大多數(shù)人發(fā)現(xiàn) 0.25s 是一個最佳選擇。你能用這個定時做任何事情嗎？并不是。如果你有一些元素需要移動更大的距離，或者有更多的步驟或狀態(tài)變化，0.25s 并不會有很好的效果，你將不得不有更多的目的性，而且定時也需要更加獨特。但這并不意味著你不能在應(yīng)用中重復(fù)使用效果好的默認(rèn)值。
你也可能會發(fā)現(xiàn)，起始動畫比結(jié)束動畫的時間稍長一些，看起來會更好一些。用戶通常是在動畫開始時被引導(dǎo)的，而在動畫結(jié)束時沒有那么多耐心，因為他們想繼續(xù)他們的動作。
#Easing
Easing 是在動畫中表達(dá)深度的一個重要方式。動畫新手最常犯的一個錯誤是在起始動畫節(jié)點使用 ease-in，在結(jié)束動畫節(jié)點使用 ease-out。實際上你需要的是反過來的。
如果我們將這些狀態(tài)應(yīng)用于過渡，它應(yīng)該像這樣：
.button {
background: #1b8f5a;
/* 應(yīng)用于初始狀態(tài)，因此此轉(zhuǎn)換將應(yīng)用于返回狀態(tài) */
transition: background 0.25s ease-in;
}
.button:hover {
background: #3eaf7c;
/* 應(yīng)用于懸停狀態(tài)，因此在觸發(fā)懸停時將應(yīng)用此過渡 */
transition: background 0.35s ease-out;
}點擊此處實現(xiàn)
Easing 也可以表達(dá)動畫元素的質(zhì)量。以下面的 Pen 為例，你認(rèn)為哪個球是硬的，哪個球是軟的？
點擊此處實現(xiàn)
你可以通過調(diào)整你的 Easing 來獲得很多獨特的效果，使你的動畫非常時尚。CSS 允許你通過調(diào)整 cubic bezier 屬性來修改 Easing，Lea Verou 開發(fā)的這個 playground 對探索這個問題非常有幫助。
雖然使用 cubic-bezier ease 提供的兩個控制柄可以為簡單的動畫獲得很好的效果，但是 JavaScript 允許多個控制柄，以此支持更多的變化。
以彈跳為例。在 CSS 中，我們必須聲明向上和向下的每個關(guān)鍵幀。在 JavaScript 中，我們可以通過在 greensock API(GSAP) 中聲明 bounce 來描述 ease 中所有這些移動 (其他 JS 庫有其他類型的 easing 默認(rèn)值)。
這里是 CSS 中用來實現(xiàn) bounce 的代碼 (來自 animate.css 的例子)：
@keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0) scaleY(3);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0) scaleY(0.9);
}
75% {
transform: translate3d(0, -10px, 0) scaleY(0.95);
}
90% {
transform: translate3d(0, 5px, 0) scaleY(0.985);
}
to {
transform: translate3d(0, 0, 0);
}
}
.bounceInDown {
animation-name: bounceInDown;
}下面是 JS 中使用 GreenSock 實現(xiàn)相同的 bounce：
gsap.from(element, { duration: 1, ease: 'bounce.out', y: -500 })我們將在之后章節(jié)的部分示例中使用 GreenSock。他們有一個很棒的 ease visualizer，幫助你建立精心制作的畫架。
#進(jìn)一步閱讀
- 界面動畫設(shè)計：通過 Val Head 動畫改善用戶體驗
- Animation at Work 作者：Rachel Nabors
網(wǎng)頁題目：創(chuàng)新互聯(lián)VUE3教程：Vue3.0過渡&動畫概述
文章路徑：http://www.dlmjj.cn/article/dpgdidd.html
