vuedose.tips（翻译系列十七）

Simple transition effect between pages and layouts in Nuxt.js

Today’s guest is Samuel Snopko! He’s a FrontEnd Knight & DesignOps enthusiast with a passion beautiful web. Co-creator of DX Meetup Basel and co-organizer of Frontend Meetup Freiburg. Recently fell in love with VueJS, NuxtJS, and Storyblok.

Sounds great huh? Let’s see what Samuel has for us!

Vue.js使动画和过渡非常容易实现。因此，您应该真正利用这个机会为您的应用程序/网站增光添彩。

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

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

export  default  { transition:  "default"  };

NuxtJS会将其解释为<transition name =“ default”>，它将在您的CSS代码中查找以下类，这些类将定义页面之间的过渡。

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

You should definitely checkVue.js documentationto understand, when are these classes used and what are transition modes. But lets define very simple transition between pages using the opacity.

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

After integration of this code into your Nuxt.js application/website, the default transition between pages will take 1000ms and content of the page will fade out and then the new one will fade in. You even don’t have to define transition name as thepageis the default transition name. You can check this code in theCodeSandbox.

If you want create a special transition for one of your pages, then you can specify a name of the transition in page.vue file as I did in this CodeSandbox for intro.vue. As you can see, if you visit intro.vue page the transition is change to two black rectangles.

nuxtjs-simple-page-transition - CodeSandbox​codesandbox.io 图标

Be aware, that all transitions between pages are working only if you are navigating between the pages with the same layout. If you are navigating between the pages with two different layouts you have to use the layout transition of Nuxt.js. You can see this in our CodeSandbox, if you visit other.vue page.

NuxtJS is already setting few defaults on the page transitions and the layout transitions. These defaults can be override directly in nuxt.config.js:

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

These are only the basics of transitioning between the pages in Nuxt.js. Under the hood of the Vue.js is hidden much more power, which can be used to create crazy animations and transitions. So keep digging in the documentation and check thissamplefrom Sarah Drasner.