要在VUE中添加過渡和動(dòng)畫，請使用內(nèi)置組件，例如<transition> and <transition-group>，應(yīng)用CSS類，利用過渡鉤進(jìn)行控制并優(yōu)化性能。 1。用<transition>包裝元素，并應(yīng)用CSS過渡類（例如V-Enter-Active）來實(shí)現(xiàn)基本淡出或幻燈片效應(yīng)。 2。使用<transition-group>對動(dòng)態(tài)列表進(jìn)行動(dòng)畫列表，確保每個(gè)項(xiàng)目都有一個(gè)關(guān)鍵屬性以進(jìn)行正確的跟蹤。 3.將過渡掛鉤（例如 @the-enter和@enter）用于基于JavaScript的動(dòng)畫控件，對GSAP等庫有用。 4.通過使用不透明度和變換等硬件加速屬性來優(yōu)化性能，并避免使用過多的動(dòng)畫，以減慢應(yīng)用程序，尤其是在移動(dòng)設(shè)備上。

在VUE中添加過渡和動(dòng)畫會(huì)使您的應(yīng)用程序更加動(dòng)態(tài)和拋光。好消息是，Vue為您提供了內(nèi)置工具，可以在不依賴重型外部圖書館的情況下進(jìn)行此操作。

使用<transition></transition>進(jìn)行基本過渡

Vue的<transition></transition>包裝器非常適合簡單的過渡，例如褪色或滑動(dòng)元素進(jìn)出。它可以與進(jìn)入或離開DOM的任何元素一起使用，例如使用v-if ， v-show或列表渲染。

這是其工作原理：

• 用<transition></transition>包裝要?jiǎng)赢嫷脑?/li>
• 應(yīng)用CSS過渡類，例如v-enter-active ， v-leave-active和v-enter

例如：

 <過渡名稱=“ vade”>
  <p v-if =“ showtext”>此文本逐漸消失</p>
</transition>

和CSS：

 。
  過渡：不透明度0.5；
}
.fade-enter {
  不透明度：0;
}

您會(huì)注意到元素逐漸消失，而不是僅僅彈出/輸出。這非常適合模式，工具提示和有條件的內(nèi)容。

使用<transition-group>的動(dòng)畫列表

當(dāng)處理列表時(shí)，尤其是動(dòng)態(tài)變化的列表時(shí)， <transition-group>是您的首選。與<transition>不同，它可以動(dòng)畫多個(gè)輸入，離開或移動(dòng)的項(xiàng)目。

要記住的一件關(guān)鍵事情：

• 在每個(gè)項(xiàng)目上使用key屬性，以便VUE可以正確跟蹤它們
• 您可能需要添加display: inline-block根據(jù)布局的flex

例子：

 <過渡組名稱=“ list” tag =“ ul”>
  <li v-for =“項(xiàng)目中的項(xiàng)目”：key =“ item.id”>
    {{item.text}}
  </li>
</transition-group>

與匹配的CSS：

 .list-enter-active {
  過渡：所有0.4；
}
.list-enter {
  不透明度：0;
  變換：翻譯（20px）;
}

此設(shè)置使列表項(xiàng)目順利出現(xiàn)，并在添加或刪除時(shí)移動(dòng)到位。

使用過渡鉤進(jìn)行更多控制

有時(shí)，您需要的不僅僅是CSS，例如基于JavaScript邏輯的觸發(fā)動(dòng)畫。 Vue提供了@before-enter ， @enter和@after-enter的鉤子，以進(jìn)行細(xì)粒度控制。

與gsap或anime.js等動(dòng)畫庫集成時(shí)，這很方便。例如，如果您正在做復(fù)雜的SVG動(dòng)畫，這些鉤子可以讓您完美地安排時(shí)間。

基本用法：

 <過渡
  @trefer-enter =“ toferenter”
  @Enter =“ Enter”
  @after-enter =“ afterenter”
>
  <div v-show =“ Insvisible”>動(dòng)畫內(nèi)容</div>
</transition>

在您的方法中，定義每個(gè)階段發(fā)生的事情。這不是您每天都使用的東西，而是需要自定義時(shí)機(jī)或效果時(shí)非常有用的。

牢記表現(xiàn)

動(dòng)畫看起來很棒，但是一次太多可以放慢您的應(yīng)用程序，尤其是在移動(dòng)設(shè)備上。堅(jiān)持使用諸如opacity硬件加速屬性，而不是對寬度或height （例如width或高度）進(jìn)行動(dòng)畫transform 。

另外，避免在每個(gè)小元素上過度過渡。選擇UI的關(guān)鍵部分，其中動(dòng)畫會(huì)增加價(jià)值 - 例如主要導(dǎo)航更改，表單提交或加載狀態(tài)。

如果您要瀏覽大型數(shù)據(jù)集并為每個(gè)項(xiàng)目進(jìn)行動(dòng)畫操作，請考慮在初始渲染或批量更新期間禁用動(dòng)畫。

基本上就是這樣。 Vue使過渡變得足夠容易，可以快速效果，但具有足夠的靈活性，可以進(jìn)行更高級的設(shè)置。只需開始簡單，根據(jù)需要在復(fù)雜性上進(jìn)行分層，并始終在真實(shí)設(shè)備上測試性能。

以上是如何在VUE中實(shí)現(xiàn)過渡和動(dòng)畫？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！