Vuejs 和 Nuxtjs 中的 CSS 过渡

已发表: 2022-03-10
快速总结 ↬过渡是删除、更改或更新应用程序中数据的好方法，因为它们的出现增加了很好的效果并且有利于用户体验。 在本教程中，我们将了解在 Vue.js 和 Nuxt.js 应用程序中应用转换的不同方法。

过渡是 CSS 的一个模块，可让您在特定 CSS 属性的值之间创建渐变过渡。 这些转换的行为可以通过指定它们的计时函数、持续时间和其他属性来控制。 在您的应用程序和网站中使用这些过渡可以创造更好的视觉体验，并且有时会在一条信息被引入或离开屏幕时吸引并保持用户的注意力。 根据 Can I Use 的说法，大多数浏览器都支持转换，尽管 Internet Explorer 和 Safari 存在一些小问题。

来自 caniuse.com 的主要浏览器支持 css-transitions 功能的数据
资料来源：caniuse.com。 （大预览）

Vue.js 是一个开源 JavaScript 框架，用于构建面向客户端的 Web 应用程序和单页应用程序 (SPA)。 这个框架的一个特点是能够无缝地向应用程序添加过渡，在页面或组件之间切换，我们将在本教程中了解如何做到这一点。

Nuxt.js 也是一个 JavaScript 框架，建立在 Vue.js 之上（通常被称为框架中的框架），用于构建服务器端 Web 应用程序、静态生成的网站以及 SPA。 它的工作原理与 Vue.js 相同，因此如果您了解 Vue.js，那么在开始使用 Nuxt.js 时应该不会有很多问题。 Nuxt.js 带有两个用于向应用程序添加过渡的属性，我们将在本教程中介绍这些属性。

本教程需要 Vue.js 或 Nuxt.js 的基本知识。 本教程中的所有代码片段都可以在 GitHub 上找到。

跳跃后更多！ 继续往下看↓

什么是过渡？

根据牛津词典，转换可以定义为：

“一篇文章中将两个主题或部分流畅地连接起来的段落。

从一种状态或条件转变为另一种状态或条件的过程或时期。”

在物理学方面，过渡是这样定义的：

“原子、原子核、电子等从一种量子态到另一种量子态的变化，伴随着辐射的发射或吸收。”

从这些定义中，我们可以了解什么是过渡。 这些定义都涉及两种不同的事物或状态。 就代码而言，转换并没有太大的不同。

什么是 CSS 过渡？

根据 Mozilla 的网络文档：

“CSS 过渡是 CSS 的一个模块，可让您在特定 CSS 属性的值之间创建渐变过渡。 这些转换的行为可以通过指定它们的时间函数、持续时间和其他属性来控制。”

这意味着我们可以将 CSS 过渡定义为：一个或多个元素的 CSS 属性从一个值更改为另一个值。

CSS transition属性使我们能够为任何有效元素添加过渡效果。 它包含最多四个其他属性（如果我们计算transition属性本身，则为五个），可以单独使用或作为简写组合使用。 每个属性都有不同的功能。

transition-property

transition-property接受我们想要注意更改的 CSS 属性的名称以及我们想要转换其更改过程的名称。 它看起来像这样：

 .btn { width: 200px; height: 50px; transition-property: width; background-color: red; color: #fff; border: 0; }

但是如果没有下一个属性，这个属性不会做任何事情。

transition-duration

transition-duration属性指定transition- transition-property中元素的更改应该持续的时间。 需要此属性才能使转换生效。 如果未设置（值大于0s ），则默认值0s将意味着它不会运行。 所以，让我们为这个过渡设置一个持续时间：

 .btn { width: 200px; transition-property: width; transition-duration: 2s; background-color: red; color: #fff; border: 0; }

在这里，我们有一个类名为btn的元素，其宽度为200px 。 我们在这里同时使用了transition-property和transition-duration属性。 这意味着，“嘿，CSS，注意width属性何时发生变化，当发生这种情况时，让效果需要2s才能改变。”

因此，如果我们有一个类名为btn的按钮，那么index.html文件将如下所示：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Transitions</title> <link rel="stylesheet" href="./assets/styles.css"> </head> <body> <Section> <h1>Hi CSS Transitions</h1> <button class="btn">Hover on me to see a cool transition</button> </Section> </body> </html>

在这里，我们有一个 HTML 文件，其中包含一个按钮，该按钮具有一个具有transition-property和transition-duration属性的类，用于监视元素宽度的变化。

需要注意的一件事是，为了使我们的按钮上的过渡起作用，我们必须实际更改该元素的宽度，或者通过使用浏览器中的开发人员工具手动调整宽度，或者使用 CSS 伪-classes，或者使用 JavaScript。 出于本教程的目的，我们将使用 CSS 伪类:hover来更改按钮的宽度：

 // existing styles .btn:hover { width: 300px; }

现在，如果我们将鼠标悬停在这个按钮上，我们应该会看到按钮的宽度在设定的时间内逐渐增加，即2s 。

请参阅 CodePen 上 Timi Omoyeni (@timibadass) 的 Pen transition-property 和 transition-duration。

transition-timing-function

transition-timing-function属性决定了过渡效果发生的速度。 此属性有五个值可用：

  • ease
    这（默认）指定缓慢开始，然后变得快速，然后缓慢结束的过渡效果。
  • linear
    这指定了从开始到结束具有相同速度的过渡效果。
  • ease-in
    这指定了一个缓慢启动的过渡效果。
  • ease-out
    这指定了一个缓慢结束的过渡效果。
  • ease-in-out
    这指定了具有缓慢开始和结束的过渡效果。
  • cubic-bezier(n,n,n,n)
    这使您可以在三次贝塞尔函数中定义自己的值。

因此，如果我们向按钮添加ease-in ，我们应该注意width和height的变化速度，与按钮返回其正常状态的速度相比。 这是我们更新的styles.css表：

 .btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: ease-in; background-color: red; color: #fff; border: 0; }

如果我们想要更戏剧化的速度效果或自由设置特定的速度效果，我们可以使用cubic-bezier(n,n,n,n) ：

 btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); background-color: red; color: #fff; border: 0; }

请参阅 CodePen 上 Timi Omoyeni (@timibadass) 的 Pen transition-timing-function。

关于这个值的一个有趣的事情是，您可以使用开发人员工具直接在浏览器中对其进行编辑。

开发工具中的三次贝塞尔曲线。
浏览器开发者工具中的三次贝塞尔曲线。 （大预览）

如果您单击开发人员工具的突出显示部分，您将获得一个界面来修改cubic-bezier选项：

三次贝塞尔界面以黄色突出显示。
三次贝塞尔界面以黄色突出显示。 （大预览）

当您移动这两个点时， (n,n,n,n)的值会发生变化，您将看到速度效果将如何出现的表示（以红色突出显示）。 当您考虑到特定的速度效果时，这可能非常有用。

transition-delay

transition-delay属性设置过渡在其效果开始发生之前必须等待多长时间（以秒为单位）。 这个时间与transition-duration属性不同，它指定了过渡效果将发生多长时间。

 .btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-delay: 5s; background-color: red; color: #fff; border: 0; }

如果您在浏览器中尝试此操作，您会注意到元素width开始改变之前的延迟。 这是因为我们设置了transition-delay属性和值。

请参阅 CodePen 上 Timi Omoyeni (@timibadass) 的 Pen transition-delay。

速记属性

单独的过渡属性使用起来可能很乏味。 出于这个原因，我们有速记属性： transition 。 它以定义的顺序接受所有属性：

 { transition: abcd; }

这里，字母对应如下：

  • a: transition-property
  • b: transition-duration
  • c: transition-timing-function
  • d: transition-delay

我们可以使用这个速记属性重构我们现有的转换工作：

 // from .btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-delay: 1s; background-color: red; color: #fff; border: 0; } // to .btn { width: 200px; height: 50px; transition: width 2s cubic-bezier(0.075, 0.82, 0.165, 1) 1s; background-color: red; color: #fff; border: 0; }

如果我们在浏览器中尝试这段代码，我们将获得与使用单个属性时相同的过渡效果。

请参阅 CodePen 上 Timi Omoyeni (@timibadass) 的使用速记属性的 Pen。

Vue.js 中的过渡

Vue.js 提供了两种不同的方式来向应用程序添加过渡。 这并不意味着我们不能以 CSS 方式使用过渡。 这只是意味着 Vue.js 的开发人员在 CSS 之上构建了更容易使用过渡。 让我们一一看看。

转换单个元素和组件

我们可以在 Vue.js 中使用转换的一种方法是使用以下任何一种方法将transition组件包装在元素或组件周围：

  • 条件渲染（使用v-if ），
  • 条件显示（使用v-show ），
  • 动态组件，
  • 组件根节点。

在开发应用程序时，有时我们希望根据值（例如布尔值）向用户显示数据。 这是一个从index.vue文件中获取的示例，说明它是如何工作的：

 <template> <div> <p v-if="show">Now you see me!</p> <p v-else>Now you don't!</p> <button @click="show = !show">click me</button> </div> </template> <script> export default { data() { return { show: true } } } </script> <style> </style>

我们在此页面中添加了两个根据 show 值show的段落。 我们还有一个按钮可以在单击时更改show的值。 我们将把这个页面添加到我们的App.vue文件中，像这样导入它：

 <template> <div> <Index /> </div> </template> <script> import Index from "./components/index.vue"; export default { name: 'App', components: { Index } } </script>

如果我们打开浏览器，我们应该会看到我们的段落和按钮：

show 为 true 时的 vue 登录页面。
默认状态下的 Vue.js 登陆页面。 （大预览）

现在，单击按钮只会更改show的值，这会导致可见文本发生更改：

show 为 false 时的着陆页。
单击按钮时的登陆页面。 （大预览）

可以通过将两个段落包装在transition组件中来向该段落添加过渡。 该组件接受一个name属性，这对于过渡工作非常重要。

 <template> <div> <transition name="fade"> <p v-if="show">Now you see me!</p> <p v-else>Now you don't!</p> </transition> <button @click="show = !show">click me</button> </div> </template>

这个名称告诉 Vue.js 哪个转换应用到这个transition组件中的元素或组件。 此时，如果我们点击按钮，我们仍然不会注意到任何转换，因为我们还没有以 CSS 类的形式为我们的转换添加配置。

需要注意的一点是，当在同一个标​​签的两个元素之间使用转换时，我们需要在每个元素上指定一个键属性，以便发生转换。

 <template> <div> <transition name="fade"> <p v-if="show" key="visible">Now you see me!</p> <p v-else key="notVisible">Now you don't!</p> </transition> <button @click="show = !show">click me</button> </div> </template>

Vue.js 有六个过渡类，它们应用于transition组件内部的元素或组件，每个类都代表过渡过程中的一个状态。 我们将只看其中的几个。

v-enter

v-enter类表示“进入的起始状态”。 这是满足条件（ v-if或v-else ）并且元素即将变为可见的点。 至此，该类已添加到元素中，一旦添加该元素，该类将被删除。 附加到transition组件的name prop（在本例中为fade ）以此类名称为前缀，但没有v 。 如果未提供name ，则可以默认使用此v 。 因此，我们可以将这个类添加到我们的index.vue文件中：

 <style> p { color: green; } .fade-enter{ color: red; transform: translateY(20px); } </style>

首先，我们为green color 然后，我们添加我们的第一个转换类， fade-name 。 在这个类中，我们将color更改为红色，并使用transform和translateY属性将段落沿 y 轴（垂直）移动20px 。 如果我们再次尝试单击该按钮，我们会注意到在切换期间几乎没有发生转换或根本没有发生转换，因为我们需要添加我们将要查看的下一个类。

v-enter-active

v-enter-active类表示过渡元素的“整体进入”状态。 这意味着这个类是在元素被插入或变得可见之前添加的，并且在过渡结束时被移除。 这个类对于v-enter工作很重要，因为它可以用来将 CSS transition属性及其属性（ transition-property 、 transition-duration 、 transition-timing-function和transition-delay ）添加到类中，为了使过渡效果起作用，需要其中一些。 让我们将这个类添加到我们的应用程序中，看看会发生什么：

 .fade-enter-active { transition: transform .3s cubic-bezier(1.0, 0.5, 0.8, 1.0), color .5s cubic-bezier(1.0, 0.5, 0.8, 1.0); }

请参阅 CodePen 上 Timi Omoyeni (@timibadass) 的 Pen vue 转换进入状态。

现在，如果我们单击按钮，我们会注意到颜色的转换以及每个文本进入视野时的位置。 但是从visible hidden的过渡不够平滑，因为没有发生过渡。

v-leave-active

v-leave-active类表示元素从visible变为hidden的整个状态。 这意味着这个类从元素开始离开页面的那一刻开始应用，一旦过渡结束，它就会被移除。 这个类对于应用leave过渡很重要，因为它接受 CSS transition属性，该属性也接受其他过渡属性。 让我们将它添加到我们的应用程序中，看看会发生什么：

 .fade-leave-active { transition: transform 1s cubic-bezier(1.0, 0.5, 0.8, 1.0), color 1s cubic-bezier(1.0, 0.5, 0.8, 1.0); }

请参阅 CodePen 上 Timi Omoyeni (@timibadass) 的 Pen vue 转换离开活动状态。

当我们现在点击按钮时，我们会注意到应该离开的元素在消失之前等待大约 2 秒。 这是因为 Vue.js 期望添加具有此转换的下一个类以使其生效。

v-leave-to

v-leave-to转换表示“离开”状态，即元素开始离开并触发其转换的点。 它在触发离开过渡后添加一帧，并在过渡或动画完成时删除。 让我们将这个类添加到我们的应用程序中，看看会发生什么：

 .fade-leave-to { transform: translateX(100px); color: cyan; }

单击按钮，我们会注意到每个离开的元素都随着颜色的变化而向右滑动。

请参阅 CodePen 上 Timi Omoyeni (@timibadass) 的 Pen vue transition leave to state。

现在我们了解了过渡在 Vue.js 中是如何工作的，下面这张图片将它们组合在一起：

vue过渡类的分类
Vue.js 过渡类的分类。 （大预览）

最后，请注意在正在转换的元素的进入和离开状态期间发生的不太平滑的转换。 这是因为 Vue.js 的转换是同时发生的。 Vue.js 有一个mode属性，可以帮助我们实现非常平滑的过渡过程。 此道具接受以下值之一：

  • in-out
    新元素首先过渡，然后，当它完成时，当前元素过渡出去。
  • out-in
    当前元素首先过渡出去，然后在完成时新元素过渡进来。

如果我们将此mode添加到我们的index.vue文件并重试，我们应该会看到更好的过渡：

 <template> <div> <transition name="fade" appear mode="out-in"> <p v-if="show" key="visible">Now you see me!</p> <p v-else key="notVisible">Now you don't!</p> </transition> <button @click="transitionMe">click me</button> </div> </template>

现在，如果我们单击按钮，我们会注意到一个元素在另一个元素进入之前离开。 这是我们为此过渡选择的mode的结果。 如果我们尝试其他模式，我们将得到不同的行为。

请参阅 CodePen 上 Timi Omoyeni (@timibadass) 的 Pen vue transition with mode。

列出转换

如果您曾经尝试使用transition组件一次向多个元素添加转换，则会在控制台中打印一个错误：

控制台中打印的 Vue 转换错误。
在控制台中打印 Vue.js 错误。 （大预览）

这是因为transition组件并不意味着一次渲染多个元素。 如果我们想一次转换两个或多个元素或渲染一个列表（使用v-for ），我们会使用transition-group组件。 这个组件也接受一个name属性，但是它与transition组件有一些不同，包括以下几点：

  • 此组件中的每个元素都需要一个 key 属性。
  • 不需要mode属性，因为一次会渲染多个元素。
  • 默认情况下会呈现span元素，但可以通过在定义transition-group组件时指定tag prop 来修改它。 让我们看一个例子（在我们的listTransition.vue文件中）：
 <template> <div> <h1>List/Group Transition</h1> <ul> <li v-for="user in users" :key="user.id"> {{user.name}} <button>Remove</button> </li> </ul> </div> </template> <script> export default { data() { return { users: [ { name: "Vuejs", id: 1 }, { name: "Vuex", id: 2 }, { name: "Router", id: 3 } ] }; } }; </script> <style> </style>

在这里，我们有一个users数组，我们使用v-for循环，在我们的模板部分显示名称。 为了能够查看这个列表，我们需要将这个组件导入到App.vue页面中：

 <template> <div> <Index /> <listTransition /> </div> </template> <script> import Index from "./components/index.vue"; import listTransition from "./components/listTransition.vue"; export default { name: "App", components: { Index, listTransition } }; </script>

请注意，当使用transition-group组件时，我们不是用ul标签（或我们想到的任何标签）包装我们的列表，而是将它包装在transition-group组件周围并将标签添加到tag属性中，如下所示：

 <template> <div> <h1>List/Group Transition</h1> <transition-group name="slide-fade" tag='ul'> <li v-for="user in users" :key="user.id"> {{user.name}} <button>Remove</button> </li> </transition-group> </div> </template> <script> export default { data() { return { users: [ { name: "Vuejs", id: 1 }, { name: "Vuex", id: 2 }, { name: "Router", id: 3 } ] }; } }; </script> <style> .slide-fade-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-leave-active { transition: transform 1s cubic-bezier(1, 0.5, 0.8, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-enter { color: mediumblue; transform: translateY(20px); } .slide-fade-leave-to { transform: translateX(100px); color: cyan; } </style>

在这里，我们将ul标签替换为transition-group组件，并将ul添加为tag属性值。 如果我们在开发人员工具中检查更新的页面，我们将看到列表被包装在我们在tag prop 中指定的元素（即ul ）中。

开发工具中突出显示的 ul 标签。
开发者工具中突出显示的 ul 标签。 （大预览）

我们还为此组件添加了一个值为slide-fade的过渡name道具，其样式规则在style部分中遵循此命名约定。 为此，我们需要将以下代码行添加到我们的文件中：

 <template> <div> <h1>List/Group Transition</h1> <transition-group name="slide-fade" tag="ul"> <li v-for="user in users" :key="user.id"> {{user.name}} <button @click="removeUser(user.id)">Remove</button> </li> </transition-group> </div> </template> <script> export default { // ... methods: { removeUser(id) { let users = this.users.filter(user => user.id !== id); this.users = users; } } }; </script>

在模板部分，我们为循环中的每个按钮添加一个单击事件，并将user.id传递给附加到此单击事件的removeUser方法。 然后我们在文件的script部分创建这个函数。 这个函数接受一个id作为参数。 然后，我们遍历我们现有的用户并过滤掉带有传递给这个函数的id的用户。 完成后，我们将新的用户数组保存到我们页面的数据中。

此时，如果您单击用户的任何按钮，则会在用户从列表中删除时应用过渡效果。

请参阅 CodePen 上 Timi Omoyeni (@timibadass) 的 Pen Vue 列表转换。

Nuxt.js 中的转换：

向 Nuxt.js 应用程序添加过渡与您在 Vue.js 中的习惯完全不同。 在 Nuxt.js 中， transition组件会自动为您添加到应用程序中。 您需要做的就是以下其中一项。

将其添加到单个页面组件

Nuxt.js 允许我们无缝地向单个页面组件添加过渡。 当用户导航到此页面时，将应用此转换。 我们所要做的就是在组件的script部分添加一个transition属性。 此属性可以是字符串、函数或对象。 它接受的一些属性是：

  • name ，
  • mode ，
  • css

与 Vue.js 一样，Nuxt.js 有一个默认name ，如果没有提供name ，则该名称会分配给转换类，称为page 。 让我们看看当我们在transition.vue中将它添加到我们的应用程序时它是如何工作的：

 <template> <div> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore libero odio, asperiores debitis harum ipsa neque cum nulla incidunt explicabo ut eaque placeat qui, quis voluptas. Aut necessitatibus aliquam veritatis. </p> <nuxt-link to="/">home</nuxt-link> </div> </template> <script> export default { transition: { name: "fade", mode: "out-in" }, data() { return { show: true }; } }; </script> <style> p { color: green; } .fade-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1); } .fade-leave-active { transition: transform 1s cubic-bezier(1, 0.5, 0.8, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1); } .fade-enter { color: mediumblue; transform: translateY(20px); } .fade-leave-to { transform: translateX(100px); color: cyan; } </style>

在此页面上，我们在模板部分显示了“lorem ipsum”。 我们还添加了transition属性，我们向其传递了一个对象，该对象的name设置为fade并且其mode设置为out-in 。 最后，在style部分，我们添加了一些样式来控制用户在此页面和另一个页面之间导航时的转换。

为了让这个转换生效，我们必须导航到/transition ，但是如果我们在浏览器中手动输入这个路由，我们不会注意到任何转换。 所以，让我们在index.vue页面上添加一个指向该页面的链接。

 <template> <div class="container"> <div> // .. <nuxt-link to="/transition">next page</nuxt-link> </div> </div> </template>

现在，如果我们单击两个页面中的任何一个上的链接，我们会注意到随着浏览器移入和移出/transition路由的滑动转换。

pageTransition

如果我们想将过渡添加到应用程序中的所有页面，则将它们添加到单个页面可能会很有挑战性。 这就是pageTransition的用武之地。该属性允许我们在nuxt.config.js文件中为所有页面添加通用配置。 此属性接受字符串和对象作为选项。 让我们看看它在nuxt.config.js中是如何工作的：

 export default { // ... /* ** Global CSS */ css: [ '~/assets/transition.css' ], pageTransition: { name: "fade", mode: "out-in" }, }

在这里，我们添加了指向 CSS 文件的链接，稍后我们将创建该文件。 我们还在文件中添加了pageTransition属性及其配置。 现在，让我们创建我们的 CSS 文件， transition.css ，并向其中添加以下样式：

 .fade-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1); } .fade-leave-active { transition: transform 1s cubic-bezier(1, 1, 1, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1); } .fade-enter { color: mediumblue; transform: translateY(20px); } .fade-leave-to { transform: translate3d(-500px, -300px 400px); color: cyan; }

我们添加了将应用于一条路线与另一条路线之间的过渡的类和样式。 如果我们从transition.vue页面中去掉transition配置，尝试在两个页面之间导航，就会得到一个transition效果。

layoutTransition

layoutTransition属性使我们能够根据页面所在的布局应用过渡。 它的工作方式与pageTranslation相同，只是它基于layout工作。 默认过渡名称是layout 。 这是一个工作原理的例子，在nuxt.config.js ：

 export default { // ... /* ** Global CSS */ css: [ '~/assets/transition.css' ], layoutTransition: { name: "fade", mode: "out-in" }, }

请注意， fade必须是布局的名称，以便过渡使用其布局。 让我们在newLayout.vue中创建这个新布局，看看我的意思：

 <template> <!-- Your template --> <div> <h1>new layout</h1> </div> </template> <script> export default { layout: "blog" // page component definitions }; </script>

结论

我们已经了解了 CSS 过渡以及如何单独使用过渡属性（ transition-property 、 transition-duration 、 transition-timing-function和transition-delay ）以及使用简写transition属性来创建它们。 我们还介绍了如何在 Vue.js 和 Nuxt.js 中应用这些转换。 但这还不是全部。 Vue.js 为我们提供了更多在应用程序中应用转换的方法：

  • “CSS 动画”，Vue.js
  • “组件之间的转换”，Vue.js
  • “状态转换”，Vue.js

相关资源

  • “CSS 转换”，MDN 网络文档
  • “过渡”（定义），Lexico
  • “CSS 过渡”，W3Schools
  • “进入/离开和列表转换”，Vue.js
  • 进入/离开图形，Vue.js
  • “API：页面transition属性”，Nuxt.js
  • “API：转换属性”，Nuxt.js
  • “Nuxt.js 中的页面和布局转换”，Debbie O'Brien，DEV