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中文网其他相关文章！