CSS transitions in Nuxt.js: An overview

Introduction

Good animation is invisible. You shouldn’t notice that you’re looking at animation. – Pasquale D’Silva

CSS transitions are a type of animation that enhance user experience by creating smooth visual continuity between state changes. Good transitions should be almost unnoticeable, while poorly designed transitions can create a visible drag or janky experience in your application.

In this post, I will demonstrate how to create awesome transitions in Nuxt.js, starting with the basics of how to work with Nuxt.js in building an app. Please note that you should have some familiarity with Vue.js to be able to follow along with this tutorial.

What are CSS transitions?

CSS transitions occur when a CSS property changes from one value to another over a period of time. For example, if we wanted to change the color of an element from red to white, we could use a transition to change from one color to the other.

Because transitions are intended to be fluid and not abrupt, they can help create better user experience, provide visual cues, maintain context and continuation, and improve user engagement.

In CSS, transitions are controlled using the shorthand transition property, with sub-properties like transition-duration, transition-timing-function, and transition-delay that enable us to add a transition effect to any valid element.

Transitions are supported on most browsers, although there are some minor issues with Internet Explorer and Safari.

Getting started with Nuxt.js

Nuxt.js is a free, open-source, modern web application framework based on Vue.js, Node.js, webpack, and Babel. Nuxt.js allows us to create three types of applications, each depending on the purpose of our build:

• Static pages
• Single-page applications
• Server side-rendered (SSR) applications

Setting up our Nuxt.js app

We can create our Nuxt app by either using the scaffolding tool — create-nuxt-app — or building from scratch. For our purposes, I will be using the former.

To get started, run the following using your package manager of choice:

npx create-nuxt-app <project-name>
//or
yarn create nuxt-app <project-name>
//or
npm init nuxt-app <project-name>

Be sure to replace <project-name> with the name of your project/app.

Once installation is complete, we will be presented with a series of questions to help configure our application for development, including name, Nuxt options, UI framework, TypeScript, linter, testing framework, and the like.

The answers to these questions are mostly personal preference. Here’s what my configuration looks like for this article:

Once that’s done, we’ll run the following command in our terminal:

$ cd <project-name>
$ npm run dev

With the above steps complete, our app should be running on http://localhost:3000. This is what we should see:

Utilizing the Vue.js transition component

Nuxt.js makes use of the Vue transition component to let us create amazing transitions between our pages and/or routes.

Transitions are created by updating the CSS value attributes when our element or Vue component enters or exits the screen. The Vue transition component allows us to capture the moments before, during, and after the element’s insertion or removal.

As demonstrated in the image below, there are three classes to capture the entering transitions (v-enter, v-enter-to, and v-enter-active) and another three classes to capture the leaving transitions (v-leave, v-leave-to and v-leave-active).

Note: These classes are namespaced, so the v would be replaced with the CSS transition class. For example, the fade class would look like this: fade-leave, fade-leave-to, and fade-leave-active.

Transitions in Nuxt.js

Page transitions in Nuxt can be global or applied to individual pages. Page transitions are route-based, and we can see them in action when we navigate to that page using nuxt-link.

Global page transitions

As its name implies, these transitions are added to all the pages of our Nuxt app from just one file: nuxt.config.js. Setting up global page transitions is a two-step process.

First, we must define the transition and make it global. To do that, we must create a global CSS file in our assets folder. To demonstrate, I will be making use of a very simple fade transition.

// /assets/css/main.css

.page-enter-active,
.page-leave-active {
  transition: opacity 0.5s;
}
.page-enter,
.page-leave-active {
  opacity: 0;
}

Notice that in this example, I made use of page instead of fade. This is because page is the default global page transition namespace.

If we wanted to override the default namespace and use our own, we’d have to use the pageTransition property to override the default transition name, as follows:

// /nuxt.config.js

pageTransition: "fade"

Once that is done, we can now make use of the code below:

// /assets/css/main.css

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

After we have defined the transition, we must include the CSS file in the nuxt.config.js file so every page of the app can use it. To do so, we’ll use the following code:

// /nuxt.config.js

css: [
  '~/assets/css/main.css'
],

Individual page transitions

For individual page transitions, we will need to define the transition using the transition key in each page. To do so, we’ll go to the desired page and add the code below:

// /About.vue

export default {
  transition: 'fade'
}

It’s that simple! We can also make use of the object option to define our transition properties.

Layout transitions

Layout transitions are global in nature and have a default value of layout. The layoutTransition property enables us to apply transitions based on the page layout. It works similarly to pageTransition but applies the animation to the layout instead of the page.

Here’s an example:

// /nuxt.config.js
layoutTransition: 'fade'
  // or
layoutTransition: {
    name: "fade",
    mode: "out-in"
},

Note: The example transitions I have shared in this article all focus on opacity. It should go without saying that we can perform other types of transitions.

Transition values

So far we have only used the fade transition, but we can of course leverage other types of transition values in our Nuxt app. By default, Nuxt will look for these class names in our global CSS file.

Although the transition value is set to string by default, there are other ways of attributing CSS values, like object and function.

For example, let’s set the transition value to object, as in the block below:

export default {
  // namekey becomes required
  transition: {
    name: 'bounce'
  }
}

Now we are able to add more properties, like mode and appear:

export default {
  // namekey becomes required
  transition: {
    name: "bounce",
    mode: "in-out", // default is out-in
    appear: true, // default is false
  }
}

Here’s what’s happening: the mode property out-in (which is the default mode) waits for the current element to go out before the new element comes in. The same is true, only vise versa, for in-out.

The second property, appear, allows us to apply transitions on initial render; by default, its value is set to false, and we can easily customize it when we define our transition in object format.

Conclusion

In this article, we have learned about CSS transitions and how to make use of transitions within pages and routes in Nuxt.js. To explore the topic further, here are some useful resources:

• CSS animations in Vue.js, from the Vue docs
• Transitioning between components in Vue.js, also from the Vue docs
• The Nuxt.js transition component, from the Nuxt docs
• Web animations with HTML, CSS, and JavaScript, from yours truly