.. | ||
assets | ||
pages | ||
nuxt.config.js | ||
package.json | ||
README.md |
Routes transitions with Nuxt.js
Nuxt.js uses the
<transition>
component to let you create amazing transitions/animations between your routes.
Usage
Nuxt.js default transition name is page
.
To add a fade transition to every page of your application, we need a CSS file that is shared across all our routes, so we start by creating a file in the assets/
folder.
assets/main.css
:
.page-enter-active, .page-leave-active {
transition: opacity .5s
}
.page-enter, .page-leave-active {
opacity: 0
}
We add its path in our nuxt.config.js
file:
module.exports = {
css: [
'assets/main.css'
]
}
And voilà! A nice fade animation will be shown between every routes.
The transition
key
You can update the defaults transition settings by adding the transition
key in you nuxt.config.js
file.
module.exports = {
transition: 'test'
// or
transition: {
name: 'test',
mode: 'out-in'
}
}
Nuxt.js will use these settings to set the component as follows:
<transition name="test" mode="out-in">
To learn more about the Vue.js <transition>
component: http://vuejs.org/v2/guide/transitions.html
The following properties that the transition
key can have:
key | Type | Default | definition |
---|---|---|---|
name |
String | "page" |
The transition name applied on all the routes transitions. |
mode |
String | "out-in" |
The transition mode applied on all routes, see Vue.js documentation. |
css |
Boolean | true |
Whether to apply CSS transition classes. Defaults to true. If set to false, will only trigger JavaScript hooks registered via component events. |
type |
String | n/a |
Specify the type of transition events to wait for to determine transition end timing. Available values are "transition" and "animation". By default, it will automatically detect the type that has a longer duration. |
enterClass |
String | n/a |
See Vue.js documentation |
enterActiveClass |
String | n/a |
See Vue.js documentation |
leaveClass |
String | n/a |
See Vue.js documentation |
leaveActiveClass |
String | n/a |
See Vue.js documentation |
Note: if the transition
key is set as a string, it will be used as the transition.name
.
You can also define methods in the transition
, these are for the JavaScript hooks:
beforeEnter: function (el) { ... }
enter: function (el, done) { ... }
afterEnter: function (el) { ... }
enterCancelled: function (el) { ... }
beforeLeave: function (el) { ... }
leave: function (el, done) { ... }
afterLeave: function (el) { ... }
leaveCancelled: function (el) { ... }
Note: it’s also a good idea to explicitly add css: false
for JavaScript-only transitions so that Vue can skip the CSS detection. This also prevents CSS rules from accidentally interfering with the transition.
Custom transition on a specific route
To define a custom transition for a specific route, simply add the transition
key to the page component:
pages/about.vue
:
<template>
<div class="container">
<h1>About page</h1>
<nuxt-link to="/">Home page</nuxt-link>
</div>
</template>
<script>
export default {
transition: 'bounce'
}
</script>
And then we add the CSS animation for this custom transition:
/* assets/main.css */
.bounce-enter-active {
animation: bounce-in .8s;
}
.bounce-leave-active {
animation: bounce-out .5s;
}
@keyframes bounce-in {
0% { transform: scale(0) }
50% { transform: scale(1.5) }
100% { transform: scale(1) }
}
@keyframes bounce-out {
0% { transform: scale(1) }
50% { transform: scale(1.5) }
100% { transform: scale(0) }
}
Note: you can also the set transition
key as an object in page components
Dynamic transition
To create a dynamic transition between two route depending on the route parameters, set the transition
key as a function
.
Example:
pages/posts.vue
<script>
export default {
transition (to, from) {
if (!from) return 'slide-left'
return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
}
}
</script>
Demo
npm install
npm run dev
Go to http://localhost:3000 and navigate through the pages.