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

一個(gè)簡(jiǎn)單的例子是基於布爾值的v-if 。當(dāng)布爾值為真時(shí)，元素出現(xiàn)；為假時(shí)，元素消失。通常，此元素會(huì)突然出現(xiàn)和消失，但使用transition 組件，您可以控制視覺(jué)效果。

<transition><div v-if="isVisible">可見(jiàn)嗎？</div></transition>

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

<transition name="fade"><div v-if="isVisible">可見(jiàn)嗎？</div></transition>

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

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

<transition :name="currentTransition"><div v-if="isVisible">可見(jiàn)嗎？</div></transition>

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

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

命名過(guò)渡時(shí)會(huì)發(fā)生什麼？

默認(rèn)情況下，當(dāng)使用transition 組件時(shí)，它會(huì)按照特定順序?qū)⑻囟?lèi)應(yīng)用於元素。這些類(lèi)可以在CSS 中使用。如果沒(méi)有CSS，這些類(lèi)實(shí)際上對(duì)元素沒(méi)有任何作用。因此，需要這種性質(zhì)的CSS：

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

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

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

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

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

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

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

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

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

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

 .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ù)您的偏好和項(xiàng)目的需要，有多種方法可以存儲(chǔ)這些過(guò)渡類(lèi)。第一個(gè)，如前所述，是將所有內(nèi)容都保存在app.vue文件的樣式塊中。您還可以將項(xiàng)目中所有過(guò)渡的Sass 部分保存在項(xiàng)目的assets 文件夾中，並將其導(dǎo)入到應(yīng)用程序的樣式塊中。

 @import "assets/_transitions.scss";

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

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

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

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

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

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

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

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

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

以下是我其中一個(gè)演示中的一個(gè)簡(jiǎ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)級(jí)別減少動(dòng)畫(huà)，則使用更簡(jiǎn)單的過(guò)渡*/
@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);
  }
}

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

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

讓我們保持過(guò)渡集合的靈活性

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

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

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

可以通過(guò)Vue 提供的各種處理樣式和類(lèi)的方法來(lái)完成此類(lèi)更改。

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

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

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

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

另一個(gè)選項(xiàng)是將道具傳遞給我們的組件。這樣，就可以通過(guò)組件的代碼將其所需的更改應(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)部的過(guò)渡類(lèi)的屬性，尤其是在其作用域內(nèi)時(shí)。

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

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

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

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

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

動(dòng)態(tài)過(guò)渡

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

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

讓我們研究這三個(gè)例子。

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

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

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

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

性質(zhì)相當(dāng)簡(jiǎn)單。我們?cè)趖ransition 上有一個(gè)綁定的name，然後在notification div 上有一個(gè)v-if 。我們還應(yīng)用了一個(gè)真或假類(lèi)來(lái)根據(jù)響應(yīng)裝飾通知。

以下是過(guò)渡的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); }
}

您會(huì)看到我正在使用CSS 動(dòng)畫(huà)來(lái)實(shí)現(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方法來(lái)設(shè)置我們的方程式。 check方法根據(jù)將提供的答案與正確答案進(jìn)行比較來(lái)決定使用哪個(gè)過(guò)渡效果。然後是簡(jiǎn)單的reset方法，它只是重置所有內(nèi)容。

這只是一個(gè)簡(jiǎn)單的例子。另一個(gè)可能的例子是，根據(jù)通知是否重要而具有兩種不同效果的通知。如果消息不太重要，那麼我們可以使用一個(gè)微妙的動(dòng)畫(huà)，不會(huì)讓用戶(hù)的眼睛離開(kāi)當(dāng)前的任務(wù)。如果它很重要，我們可以使用更直接的動(dòng)畫(huà)來(lái)強(qiáng)制眼睛向上看通知。

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

我們可以構(gòu)建的另一個(gè)東西是某種輪播。這可能是幻燈片演示、圖片庫(kù)或一系列說(shuō)明?；舅枷胧俏覀冃枰错樞蛳蛴脩?hù)呈現(xiàn)信息。在此演示中，用戶(hù)可以決定何時(shí)繼續(xù)以及是向前移動(dòng)還是向後移動(dòng)。

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

這是HTML：

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

您會(huì)看到，每當(dāng)通過(guò)組件元素上的綁定is屬性切換組件時(shí)，我們都只是進(jìn)行過(guò)渡。

這是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)級(jí)別減少動(dòng)畫(huà)，則使用更簡(jiǎn)單的過(guò)渡*/
@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); }
}

在這裡，我們有兩個(gè)過(guò)渡，一個(gè)用於用戶(hù)單擊“next”按鈕時(shí)，另一個(gè)用於“prev”按鈕。每個(gè)都基本上使用transform屬性在適當(dāng)?shù)姆较蛏匣瑒?dòng)組件，但有一些額外的內(nèi)容可以創(chuàng)建一種擠壓效果，以獲得卡通效果。我們還使用prefers-reduced-motion將動(dòng)畫(huà)更改為更簡(jiǎn)單的淡出效果，並在適當(dāng)?shù)姆较蛏仙晕⒒瑒?dòng)一下。

現(xiàn)在，對(duì)於JavaScript：

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

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

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

對(duì)於我們的最後一個(gè)示例，我們將了解如何根據(jù)transition-group組件內(nèi)列表的當(dāng)前狀態(tài)更改過(guò)渡。這裡的想法是一個(gè)列表，每次更新一個(gè)項(xiàng)目，每次使用不同的過(guò)渡。

在此示例中，我們?cè)谟覀?cè)顯示城市列表，在左側(cè)顯示空白列表。當(dāng)在右側(cè)選擇城市時(shí)，它們會(huì)填充左側(cè)的空白。第一個(gè)城市從上方滑入，同時(shí)淡入視圖。最後一個(gè)城市之前的下一個(gè)城市將從右側(cè)或左側(cè)滑入，具體取決於之前的過(guò)渡，最後一個(gè)城市從下方滑入。

這是HTML：

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

像往常一樣，一個(gè)相當(dāng)簡(jiǎn)單的設(shè)置。以下是CSS 中的過(guò)渡：

 .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)級(jí)別減少動(dòng)畫(huà)，則關(guān)閉過(guò)渡*/
@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; }
}

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

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

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