「译」 VueDose Tip 17 - Nuxt.js 中页面和布局之间的简单过渡效果

Leecason 2020-01-23 Vue 2 Nuxt VueDose 文章翻译

Vue.js 使动画和过渡非常容易实现。因此，你应该利用这个机会为你的应用程序/网站增添些许亮点。

Nuxt.js 在 Vue.js 所提供的功能之上构建。它使你可以非常快速且几乎不费吹灰之力地在页面之间创建非常简单的过渡。

你只需要在 page.vue 文件中定义过渡的名称。此名称将生成 6 个过渡类，这些过渡类可用于页面之间的过渡效果。

export default {
  transition: "default"

1
2
3

Nuxt.js 会将其解释为 <transition name="default"> ，并将在你的 CSS 代码中寻找以下类，这些类将定义页面之间的过渡。

.default-enter {
.default-enter-active {
.default-enter-to {
.default-leave {
.default-leave-active {
.default-leave-to {

1
2
3
4
5
6
7
8
9
10
11
12

你一定要查看 Vue.js 文档来了解这些类何时使用以及过渡模式。但让我们使用透明度来定义页面间非常简单的过渡。

.page-enter-active,
.page-leave-active {
  transition-property: opacity;
  transition-timing-function: ease-in-out;
  transition-duration: 500ms;
.page-enter,
.page-leave-to {
  opacity: 0;

1
2
3
4
5
6
7
8
9
10

将此代码集成到 Nuxt.js 应用程序/网站后，页面之间的默认过渡将花费 1000 毫秒，上一个页面内容将淡出，然后新的页面将淡入。你甚至不需要定义过渡名称因为 page 就是默认的过渡名称。你可以在 CodeSandbox 中查看。

如果希望为某个页面创建特殊的过渡，则你可以在 page.vue 定义一个过渡名称，就像我在 CodeSandbox 中为 intro.vue 做的那样。如你所见，如果你访问 intro.vue 页面，过渡就是两个黑色矩形。

https://codesandbox.io/embed/2xovlqpv9n

请注意，仅当你在具有相同布局的页面之间切换时，页面之间的过渡效果才有效。如果要在具有两种不同的布局的页面之间导航，则必须使用 Nuxt.js 的布局过渡。如果你访问 other.vue 页面，你将在我们的 CodeSandbox 中看到。

NuxtJS 已经在页面过渡和布局过渡上设置了一些默认值。这些默认值可以在 nuxt.config.js 中直接覆盖：

module.exports = {
  /* Layout Transitions */
  layoutTransition: {
    name: "layout",
    mode: ""
  /* Page Transitions */
  pageTransition: {
    name: "default",
    mode: ""