VUE中指定過渡的力量

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

一個簡單的例子是基於布爾值的v-if 。當布爾值為真時，元素出現；為假時，元素消失。通常，此元素會突然出現和消失，但使用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 的某些特性，從而產生一些有趣的結果。

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

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

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

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

命名過渡時會發生什麼？

默認情況下，當使用transition 組件時，它會按照特定順序將特定類應用於元素。這些類可以在CSS 中使用。如果沒有CSS，這些類實際上對元素沒有任何作用。因此，需要這種性質的CSS：

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

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

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

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

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

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

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

構建過渡效果集合

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

因此，讓我們考慮將過渡的CSS 保留在應用程序根目錄的樣式塊中，通常是app.vue文件。在我的大多數項目中，我將它們放在樣式塊的最後一部分，以便於查找以進行調整和添加。將CSS 保存在此位置使過渡效果可用於整個應用程序中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); }

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

 @import "assets/_transitions.scss";

此方法允許在Vue 文件之外調整和添加過渡集合。此設置的另一個好處是，如果項目共享過渡效果，則可以輕鬆地在項目之間傳輸此類文件。如果一個項目獲得了一個新的過渡，那麼很容易將添加的內容傳輸到另一個項目，而無需接觸主項目文件。

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

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

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

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

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

現在，讓我們慢下來一分鐘

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

在大多數情況下，將媒體查詢作為我們過渡集合的一部分非常容易，並且應該考慮。我們可以減少過渡中涉及的運動量以減少負面影響，或者乾脆關閉它們。

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

 .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);
}

/* 如果在操作系統級別減少動畫，則使用更簡單的過渡*/
@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);
  }
}

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

要測試這一點，需要在您各自的操作系統上找到並選擇一個複選框。在Windows 上，您可以在<kbd>控制面板> 易于访问中心> 使计算机更容易查看</kbd>部分找到它；查找“關閉所有不必要的動畫（如果可能）”。在Mac 上，請查看<kbd>系统偏好设置> 辅助功能> 显示</kbd>；查找“減少運動”。最新的iOS 設備在<kbd>辅助功能</kbd>下也有類似的設置。

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

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

最簡單的方法是直接在transition 組件內的元素上使用內聯樣式。

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

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

假設您正在使用具有is屬性的組件元素來進行動態組件，例如：

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

即使使用此動態組件，我們也有選項可以調整過渡效果的屬性。同樣，我們可以在組件元素上應用內聯樣式，該樣式將放置在組件的根元素上。根元素也接收過渡類，因此我們將直接覆蓋其屬性。

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

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

<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>

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

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

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

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

根據需要，可以在組件內更改任何全局過渡類。儘管這不如在類結構之外更改屬性靈活，但在某些情況下它仍然非常有用。

如您所見，即使使用我們的預構建過渡集合，我們仍然可以選擇靈活性。

動態過渡

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

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

讓我們研究這三個例子。

示例1：根據答案更改過渡

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

其背後的邏輯並不復雜，transition 的設置也不復雜。這是HTML：

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

性質相當簡單。我們在transition 上有一個綁定的name，然後在notification div 上有一個v-if 。我們還應用了一個真或假類來根據響應裝飾通知。

以下是過渡的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 動畫來實現上下和左右效果。

以下是一些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方法來設置我們的方程式。 check方法根據將提供的答案與正確答案進行比較來決定使用哪個過渡效果。然後是簡單的reset方法，它只是重置所有內容。

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

示例2：根據用戶交互更改過渡

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

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

這是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);
}

/* 如果在操作系統級別減少動畫，則使用更簡單的過渡*/
@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屬性在適當的方向上滑動組件，但有一些額外的內容可以創建一種擠壓效果，以獲得卡通效果。我們還使用prefers-reduced-motion將動畫更改為更簡單的淡出效果，並在適當的方向上稍微滑動一下。

現在，對於JavaScript：

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

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

示例3：根據列表狀態更改過渡

對於我們的最後一個示例，我們將了解如何根據transition-group組件內列表的當前狀態更改過渡。這裡的想法是一個列表，每次更新一個項目，每次使用不同的過渡。

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

這是HTML：

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

像往常一樣，一個相當簡單的設置。以下是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;
}

/* 如果在操作系統級別減少動畫，則關閉過渡*/
@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; }
}

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

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

以上是VUE中指定過渡的力量的詳細內容。更多資訊請關注PHP中文網其他相關文章！