Vue.js 提供多種方式控制元素或組件在插入DOM時如何視覺化呈現(xiàn)，例如淡入、滑入或其他視覺效果。幾乎所有這些功能都基于單個組件：transition 組件。

一個簡單的例子是基于布爾值的 v-if。當布爾值為真時，元素出現(xiàn)；為假時，元素消失。通常，此元素會突然出現(xiàn)和消失，但使用 transition 組件，您可以控制視覺效果。

<transition><div v-if="isVisible">可見嗎？</div></transition>

許多文章都很好地介紹了 transition 組件，例如 Sarah Drasner、Nicolas Udy 和 Hassan Djirdeh 的文章。每篇文章都詳細介紹了 Vue transition 組件的不同方面。本文將重點介紹 transition 組件的一個方面：它們可以被“命名”。

<transition name="fade"><div v-if="isVisible">可見嗎？</div></transition>

此屬性帶來的初始變化是，在過渡序列期間注入到元素中的 CSS 類將以給定的名稱作為前綴。基本上，它將是 fade-enter 而不是上面的 v-enter。此單個屬性的功能遠不止此簡單的選項。它可以用來利用 Vue 和 CSS 的某些特性，從而產(chǎn)生一些有趣的結(jié)果。

另一個需要考慮的是，name 屬性可以綁定：

<transition :name="currentTransition"><div v-if="isVisible">可見嗎？</div></transition>

在此示例中，過渡將被命名為 currentTransition 解析到的值。此簡單的更改為應(yīng)用程序的動畫提供了另一層選項和功能。使用靜態(tài)和動態(tài)命名過渡，項目可以擁有一系列預(yù)構(gòu)建的過渡，準備應(yīng)用于整個應(yīng)用程序，可以擴展應(yīng)用于它們的現(xiàn)有過渡的組件，切換在應(yīng)用之前或之后使用的過渡，允許用戶選擇過渡，并根據(jù)列表的當前狀態(tài)控制列表的各個元素如何過渡到位。

本文旨在探討這些功能并解釋如何使用它們。

命名過渡時會發(fā)生什么？

默認情況下，當使用 transition 組件時，它會按照特定順序?qū)⑻囟悜?yīng)用于元素。這些類可以在 CSS 中使用。如果沒有 CSS，這些類實際上對元素沒有任何作用。因此，需要這種性質(zhì)的 CSS：

.v-enter,
.v-leave-to {
  opacity: 0;
}

.v-enter-active,
.v-leave-active {
  transition: 0.5s;
}

這會導(dǎo)致元素以半秒的持續(xù)時間淡入淡出。對過渡的微小更改為用戶提供了優(yōu)雅的視覺反饋。但是，仍然有一個問題需要考慮。但首先，命名過渡有什么不同？

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: 0.5s;
}

基本上相同的 CSS，但使用 fade- 作為前綴而不是 v-。此命名解決了使用 transition 組件的默認類名時可能發(fā)生的問題。v- 前綴實際上使類具有全局性，尤其是在將 CSS 放置在應(yīng)用程序根級別的樣式塊中時。這實際上將使整個應(yīng)用程序中*所有*沒有 name 屬性的過渡使用相同的過渡效果。對于小型應(yīng)用程序，這可能就足夠了，但在更大、更復(fù)雜的應(yīng)用程序中，這可能會導(dǎo)致不良的視覺效果，因為并非所有內(nèi)容都應(yīng)該在半秒內(nèi)淡入淡出。

命名過渡為開發(fā)人員在整個項目中提供了關(guān)于如何視覺化插入或刪除不同元素或組件的控制級別。建議所有過渡都命名——即使只有一個——以養(yǎng)成這樣做的習(xí)慣。即使應(yīng)用程序只有一個過渡效果，將來也可能需要添加一個新的過渡效果。在項目中已經(jīng)命名了現(xiàn)有的過渡，這簡化了添加新過渡的工作。

構(gòu)建過渡效果集合

命名過渡提供了一個簡單但非常有用的過程。一種常見的做法可能是將過渡類創(chuàng)建為使用它們的組件的一部分。如果完成了組件樣式的作用域的另一種常見做法，則這些類將僅對該特定組件可用。如果兩個不同的組件在其樣式塊中具有類似的過渡，那么我們只是在重復(fù)代碼。

因此，讓我們考慮將過渡的 CSS 保留在應(yīng)用程序根目錄的樣式塊中，通常是 app.vue 文件。在我的大多數(shù)項目中，我將它們放在樣式塊的最后一部分，以便于查找以進行調(diào)整和添加。將 CSS 保存在此位置使過渡效果可用于整個應(yīng)用程序中 transition 組件的每次使用。以下是我的一些項目中的示例。

.fade-enter,
.fade-leave-to { opacity: 0; }
.fade-enter-active,
.fade-leave-active { transition: 0.5s; }

.slide-enter {
  opacity: 0;
  transform: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

.slide-enter-to { transform: scale3d(1, 1, 1); }
.slide-enter-active,
.slide-leave-active { transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.slide-leave { transform: scale3d(1, 1, 1); }

.slide-leave-to {
  opacity: 0;
  transform: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

.rotate-enter { transform: perspective(500px) rotate3d(0, 1, 0, 90deg); }
.rotate-enter-active,
.rotate-leave-active { transition: 0.5s; }
.rotate-leave-to { transform: perspective(500px) rotate3d(0, 1, 0, -90deg); }

根據(jù)您的偏好和項目的需要，有多種方法可以存儲這些過渡類。第一個，如前所述，是將所有內(nèi)容都保存在 app.vue 文件的樣式塊中。您還可以將項目中所有過渡的 Sass 部分保存在項目的 assets 文件夾中，并將其導(dǎo)入到應(yīng)用程序的樣式塊中。

@import "assets/_transitions.scss";

此方法允許在 Vue 文件之外調(diào)整和添加過渡集合。此設(shè)置的另一個好處是，如果項目共享過渡效果，則可以輕松地在項目之間傳輸此類文件。如果一個項目獲得了一個新的過渡，那么很容易將添加的內(nèi)容傳輸?shù)搅硪粋€項目，而無需接觸主項目文件。

如果您使用的是 CSS 而不是 Sass，那么您可以將該文件作為項目的依賴項包含在內(nèi)。您可以通過將文件保存在項目的 assets 文件夾中并在 main.js 文件中放置一個 require 語句來實現(xiàn)此目的。

require("@/assets/transitions.css");

另一個選項是將過渡樣式保存在靜態(tài) CSS 文件中，該文件可以存儲在其他位置，或者在項目的 public 文件夾中，或者直接存儲在服務(wù)器上。由于這是一個常規(guī)的 CSS 文件，因此不需要構(gòu)建或部署——只需在 index.html 文件中包含一個鏈接引用即可。

<link href="/css/transitions.css" rel="stylesheet" type="text/css">

此文件還可以潛在地存儲在 CDN 中，供所有項目共享。每當文件更新時，更改都會立即在所有引用它的位置可用。如果創(chuàng)建了一個新的過渡名稱，則現(xiàn)有項目可以根據(jù)需要開始使用新的名稱。

現(xiàn)在，讓我們慢下來一分鐘

當我們構(gòu)建一個要在整個項目中使用的過渡集合時，讓我們考慮一下那些可能不希望動畫過于突然，或者根本不希望出現(xiàn)動畫的用戶。有些人可能會認為我們的動畫過于夸張且不必要，但對某些人來說，它們實際上可能會導(dǎo)致問題。前段時間，WebKit 引入了 prefers-reduced-motion 媒體查詢來幫助解決可能的前庭頻譜障礙問題。Eric Bailey 還發(fā)布了對媒體查詢的很好的介紹。

在大多數(shù)情況下，將媒體查詢作為我們過渡集合的一部分非常容易，并且應(yīng)該考慮。我們可以減少過渡中涉及的運動量以減少負面影響，或者干脆關(guān)閉它們。

以下是我其中一個演示中的一個簡單示例：

.next-enter {
  opacity: 0;
  transform: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

.next-enter-to { transform: scale3d(1, 1, 1); }
.next-enter-active,
.next-leave-active { transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.next-leave { transform: scale3d(1, 1, 1); }

.next-leave-to {
  opacity: 0;
  transform: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

/* 如果在操作系統(tǒng)級別減少動畫，則使用更簡單的過渡*/
@media screen and (prefers-reduced-motion: reduce) {
  .next-enter {
    opacity: 0;
    transform: translate3d(100px, 0, 0);
  }

  .next-enter-active,
  .next-leave-active { transition: 0.5s; }

  .next-leave-to {
    opacity: 0;
    transform: translate3d(-100px, 0, 0);
  }
}

在這個例子中，我采用了一個相當夸張的過渡，并使其更簡單。動畫是一個向左移動的滑動動畫，具有彈性緩動效果，然后在移開時縮小并淡出。如果某人的減少運動偏好已設(shè)置，則動畫將成為一個更簡單的過渡，距離更短（這使其速度更慢）并保持淡出效果。如果我們想關(guān)閉它們，那么我們只需要引用具有 transition 屬性的類并將它們的值設(shè)置為 none 即可。

要測試這一點，需要在您各自的操作系統(tǒng)上找到并選擇一個復(fù)選框。在 Windows 上，您可以在<kbd>控制面板 > 易于訪問中心 > 使計算機更容易查看</kbd>部分找到它；查找“關(guān)閉所有不必要的動畫（如果可能）”。在 Mac 上，請查看<kbd>系統(tǒng)偏好設(shè)置 > 輔助功能 > 顯示</kbd>；查找“減少運動”。最新的 iOS 設(shè)備在<kbd>輔助功能</kbd>下也有類似的設(shè)置。

讓我們保持過渡集合的靈活性

有了這個過渡集合，可能會出現(xiàn)缺乏靈活性的問題。例如，如果一個元素需要稍微慢一點的淡出時間怎么辦？假設(shè)效果中的其他所有內(nèi)容都可以保持不變，只需要更改 transition-duration。有一些方法可以進行調(diào)整，而無需創(chuàng)建全新的過渡名稱。

最簡單的方法是直接在 transition 組件內(nèi)的元素上使用內(nèi)聯(lián)樣式。

<transition name="fade"><div style="transition-duration: 6s;" v-if="isVisible">這有不同的持續(xù)時間</div></transition>

可以通過 Vue 提供的各種處理樣式和類的方法來完成此類更改。

假設(shè)您正在使用具有 is 屬性的組件元素來進行動態(tài)組件，例如：

<transition mode="out-in" name="fade"><component :is="currentComponent"></component></transition>

即使使用此動態(tài)組件，我們也有選項可以調(diào)整過渡效果的屬性。同樣，我們可以在組件元素上應(yīng)用內(nèi)聯(lián)樣式，該樣式將放置在組件的根元素上。根元素也接收過渡類，因此我們將直接覆蓋其屬性。

<transition mode="out-in" name="fade"><component :is="currentComponent" style="transition-duration: 6s;"></component></transition>

另一個選項是將道具傳遞給我們的組件。這樣，就可以通過組件的代碼將其所需的更改應(yīng)用于其根元素。

<transition mode="out-in" name="fade"><component :is="currentComponent" duration="6s"></component></transition>

<template><div :style="`transition-duration: ${duration}`">組件一</div></template>
<script>
export default {
  name: "component-one",
  props: {
    duration: String
  }
};
</script>

我們還可以覆蓋組件樣式塊內(nèi)部的過渡類的屬性，尤其是在其作用域內(nèi)時。

.fade-enter-active,
.fade-leave-active { transition-duration: 1s; }

在這種情況下，組件的淡出持續(xù)時間將為一秒，而不是全局持續(xù)時間半秒。我們甚至可以更進一步，為序列的每一側(cè)設(shè)置不同的持續(xù)時間。

.fade-enter-active { transition-duration: 1s; }
.fade-leave-active { transition-duration: 2s; }

根據(jù)需要，可以在組件內(nèi)更改任何全局過渡類。盡管這不如在類結(jié)構(gòu)之外更改屬性靈活，但在某些情況下它仍然非常有用。

如您所見，即使使用我們的預(yù)構(gòu)建過渡集合，我們?nèi)匀豢梢赃x擇靈活性。

動態(tài)過渡

即使在我們使用 Vue 的 transition 組件可以完成所有這些有趣的事情之后，另一個有趣的特性仍在等待探索。transition 組件上的 name 屬性可以是動態(tài)的，這意味著我們可以隨意更改當前使用的過渡。

這意味著可以根據(jù)代碼中的不同情況更改過渡以具有不同的動畫效果。例如，我們可以根據(jù)問題的答案更改過渡，根據(jù)用戶交互決定過渡，并讓列表根據(jù)列表本身的當前狀態(tài)使用不同的過渡。

讓我們研究這三個例子。

示例 1：根據(jù)答案更改過渡

在此示例中，我們有一個簡單的數(shù)學(xué)問題需要解答。隨機選擇兩個數(shù)字，我們應(yīng)該提供它們的和。然后單擊按鈕以將答案與預(yù)期答案進行比較。方程式上方會出現(xiàn)一個小通知，指示答案是真還是假。如果答案正確，則通知會提供一個建議點頭表示肯定的上下動畫的過渡。如果您的答案不正確，則通知會左右移動，表示搖頭否定。

其背后的邏輯并不復(fù)雜，transition 的設(shè)置也不復(fù)雜。這是 HTML：

<transition :name="currentTransition"><div v-if="answerChecked">{{ response }}</div></transition>

性質(zhì)相當簡單。我們在 transition 上有一個綁定的 name，然后在 notification div 上有一個 v-if。我們還應(yīng)用了一個真或假類來根據(jù)響應(yīng)裝飾通知。

以下是過渡的 CSS：

.positive-enter-active { animation: positive 1s; }
@keyframes positive {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(0, -20px, 0); }
  50% { transform: translate3d(0, 20px, 0); }
  75% { transform: translate3d(0, -20px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.negative-enter-active { animation: negative 1s; }
@keyframes negative {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-20px, 0, 0); }
  50% { transform: translate3d(20px, 0, 0); }
  75% { transform: translate3d(-20px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

您會看到我正在使用 CSS 動畫來實現(xiàn)上下和左右效果。

以下是一些 JavaScript 代碼：

methods: {
  randomProblem: function () {
    this.a = Math.floor(Math.random() * Math.floor(10));
    this.b = Math.floor(Math.random() * Math.floor(10));
  },
  check: function () {
    this.response = this.a   this.b === parseInt(this.answer);
    this.answerChecked = true;
    this.currentTransition = this.response ? 'positive' : 'negative';
  },
  reset: function () {
    this.answer = null;
    this.answerChecked = false;
    this.randomProblem();
  }
}

這里有 randomProblem 方法來設(shè)置我們的方程式。check 方法根據(jù)將提供的答案與正確答案進行比較來決定使用哪個過渡效果。然后是簡單的 reset 方法，它只是重置所有內(nèi)容。

這只是一個簡單的例子。另一個可能的例子是，根據(jù)通知是否重要而具有兩種不同效果的通知。如果消息不太重要，那么我們可以使用一個微妙的動畫，不會讓用戶的眼睛離開當前的任務(wù)。如果它很重要，我們可以使用更直接的動畫來強制眼睛向上看通知。

示例 2：根據(jù)用戶交互更改過渡

我們可以構(gòu)建的另一個東西是某種輪播。這可能是幻燈片演示、圖片庫或一系列說明。基本思想是我們需要按順序向用戶呈現(xiàn)信息。在此演示中，用戶可以決定何時繼續(xù)以及是向前移動還是向后移動。

這同樣是一個相當簡單的設(shè)置。這個例子或多或少是一個幻燈片演示類型的情況。底部的兩個按鈕在具有滑動過渡的兩個組件之間切換。一個真正的項目將有更多組件，或者可能更改組件內(nèi)容的邏輯，這取決于當前的幻燈片。此示例將保持簡單，以演示該想法。

這是 HTML：

<transition :name="currentTransition" mode="out-in"><component :is="slides[currentSlide]"></component></transition>

您會看到，每當通過組件元素上的綁定 is 屬性切換組件時，我們都只是進行過渡。

這是 CSS：

.next-enter {
  opacity: 0;
  transform: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

.next-enter-to { transform: scale3d(1, 1, 1); }
.next-enter-active,
.next-leave-active { transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.next-leave { transform: scale3d(1, 1, 1); }

.next-leave-to {
  opacity: 0;
  transform: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

.prev-enter {
  opacity: 0;
  transform: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

.prev-enter-to { transform: scale3d(1, 1, 1); }
.prev-enter-active,
.prev-leave-active { transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.prev-leave { transform: scale3d(1, 1, 1); }

.prev-leave-to {
  opacity: 0;
  transform: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

/* 如果在操作系統(tǒng)級別減少動畫，則使用更簡單的過渡*/
@media screen and (prefers-reduced-motion: reduce) {
  .next-enter { opacity: 0; transform: translate3d(100px, 0, 0); }
  .next-enter-active,
  .next-leave-active { transition: 0.5s; }
  .next-leave-to { opacity: 0; transform: translate3d(-100px, 0, 0); }

  .prev-enter { opacity: 0; transform: translate3d(-100px, 0, 0); }
  .prev-enter-active,
  .prev-leave-active { transition: 0.5s; }
  .prev-leave-to { opacity: 0; transform: translate3d(100px, 0, 0); }
}

在這里，我們有兩個過渡，一個用于用戶單擊“next”按鈕時，另一個用于“prev”按鈕。每個都基本上使用 transform 屬性在適當?shù)姆较蛏匣瑒咏M件，但有一些額外的內(nèi)容可以創(chuàng)建一種擠壓效果，以獲得卡通效果。我們還使用 prefers-reduced-motion 將動畫更改為更簡單的淡出效果，并在適當?shù)姆较蛏仙晕⒒瑒右幌隆?/p>

現(xiàn)在，對于 JavaScript：

methods: {
  changeSlide: function (dir) {
    this.currentSlide = dir === 'next' ? this.currentSlide   1 : this.currentSlide - 1;
    this.currentTransition = dir;
  }
}

每個按鈕在其單擊事件上調(diào)用 changeSlide 方法并傳遞它所代表的方向。然后我們有一些邏輯來跟蹤當前的幻燈片是什么。單行代碼控制使用哪個過渡。由于“next”按鈕將“next”作為方向傳遞，因此它對應(yīng)于 CSS 中的“next”過渡。對于“prev”按鈕也是如此。每次用戶單擊按鈕時，應(yīng)用程序都會自動知道要使用哪個過渡。因此，我們有很好的過渡效果，可以提供關(guān)于用戶在序列中前進的方向的上下文。

示例 3：根據(jù)列表狀態(tài)更改過渡

對于我們的最后一個示例，我們將了解如何根據(jù) transition-group 組件內(nèi)列表的當前狀態(tài)更改過渡。這里的想法是一個列表，每次更新一個項目，每次使用不同的過渡。

在此示例中，我們在右側(cè)顯示城市列表，在左側(cè)顯示空白列表。當在右側(cè)選擇城市時，它們會填充左側(cè)的空白。第一個城市從上方滑入，同時淡入視圖。最后一個城市之前的下一個城市將從右側(cè)或左側(cè)滑入，具體取決于之前的過渡，最后一個城市從下方滑入。

這是 HTML：

<transition-group :name="currentListTransition" tag="ul"><li :key="item" v-for="(item, index) in selectedItems">{{ item }}</li></transition-group>

像往常一樣，一個相當簡單的設(shè)置。以下是 CSS 中的過渡：

.top-enter-active,
.top-leave-active { transition: 0.5s; }
.top-enter,
.top-leave-to {
  opacity: 0;
  transform: translate3d(0, -40px, 0);
}

.top-move {
  opacity: 0.5;
  transition: 0.5s;
}

.left-enter-active,
.left-leave-active { transition: 0.5s; }
.left-enter,
.left-leave-to {
  opacity: 0;
  transform: translate3d(-40px, 0, 0);
}

.left-move {
  opacity: 0.5;
  transition: 0.5s;
}

.right-enter-active,
.right-leave-active { transition: 0.5s; }
.right-enter,
.right-leave-to {
  opacity: 0;
  transform: translate3d(40px, 0, 0);
}

.right-move {
  opacity: 0.5;
  transition: 0.5s;
}

.bottom-enter-active,
.bottom-leave-active { transition: 0.5s; }
.bottom-enter,
.bottom-leave-to {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}

.bottom-move {
  opacity: 0.5;
  transition: 0.5s;
}

/* 如果在操作系統(tǒng)級別減少動畫，則關(guān)閉過渡*/
@media screen and (prefers-reduced-motion: reduce) {
  .top-enter-active,
  .top-leave-active { transition: none; }
  .top-move { transition: none; }
  .left-enter-active,
  .left-leave-active { transition: none; }
  .left-move { transition: none; }
  .right-enter-active,
  .right-leave-active { transition: none; }
  .right-move { transition: none; }
  .bottom-enter-active,
  .bottom-leave-active { transition: none; }
  .bottom-move { transition: none; }
}

如您所見，每個可能的城市方向在空白列表中出現(xiàn)都有一個過渡。

現(xiàn)在，對于我們的 JavaScript：

methods: {
  chooseCity: function (index) {
    let selectedLength = this.selectedItems.length;
    let citiesLength = this.cities.length;
    let clt = this.currentListTransition;

    if (selectedLength === 0) {
      clt = 'top';
    } else if (selectedLength > 0 && selectedLength 
<p><code>chooseCity</code> 方法處理選擇每個城市時發(fā)生的情況。我們主要關(guān)心的是方法中間的一系列 <code>if</code> 和 <code>if/else</code> 語句。當選擇城市時，邏輯會查看最終將選定城市推入的 <code>selectedItems</code> 數(shù)組的當前長度。如果長度為零，則那是第一個城市，因此過渡應(yīng)該使其從頂部進入。如果長度在零和城市列表的總數(shù)之間，則過渡應(yīng)該是向右或向左。使用的新方向基于先前過渡方向的方向。然后，最后，如果我們選擇最后一個城市，它將更改為底部過渡。同樣，我們使用 <code>prefers-reduced-motion</code>，在這種情況下完全關(guān)閉過渡。</p>
<p>更改列表過渡的另一個選項是根據(jù)所選項目的類型進行更改；例如，東海岸與西海岸城市，每個城市都有不同的過渡。考慮根據(jù)添加到列表中的當前項目數(shù)量更改過渡；例如，每五個項目一個不同的過渡。</p>
<h3>再見，感謝所有過渡</h3>
<p>在所有這些示例和想法之后，我希望您會在您自己的項目中考慮利用 Vue 的 transition 組件。探索向您的應(yīng)用程序添加過渡和動畫的可能性，為您的用戶提供上下文和興趣。在許多情況下，此類添加非常容易實現(xiàn)，幾乎到了不添加它們是一種遺憾的地步。Vue 提供了一個令人興奮且非常有用的開箱即用的功能，即 transition 組件，我只能鼓勵使用它。</p>
<p>干杯。</p>

以上是VUE中指定過渡的力量的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！