nuxt
Layout transitions (layoutTransition) javascript hooks
What problem does this feature solve?
When I change route page and new page has another layout, I need vue transition hooks, to detect and handle it (in my case - I update store state in beforeLeave/afterEnter hooks)
Vue transition hooks: https://vuejs.org/v2/api/#transition
I tried write transition/layoutTransition inside layouts, but it doesn't work.
UPD: tried in nuxt.config - same result
layoutTransition: {
beforeEnter: function () {
debugger
}
}
Nuxt version: 2.8.1
What does the proposed changes look like?
Same what you did here: https://github.com/nuxt/nuxt.js/issues/34 But for layouts
More specifically, looks like transition is serialized to the template here: https://github.com/nuxt/nuxt.js/blob/0cb2df73a026f4a26fb32cbda33377e8debf4a2f/packages/vue-app/template/index.js#L61
But layout transition is done differently here: https://github.com/nuxt/nuxt.js/blob/0cb2df73a026f4a26fb32cbda33377e8debf4a2f/packages/vue-app/template/App.js#L58
I tried to use function (like pageTransition) in layoutTransition and it didn't work.
As stated in the official documentation, this works as expected.
// nuxt.config.js
{
pageTransition: {
name: 'page',
mode: 'out-in',
beforeEnter (el) {
console.log('This works...');
}
}
}
But if you try that for a layout, it won't work.
// nuxt.config.js
{
layoutTransition: {
name: 'layout',
mode: 'out-in',
beforeEnter (el) {
console.log('This doesnt work...');
}
}
Layout transition only work with css, at the moment.
// nuxt.config.js
{
layoutTransition: {
name: 'layout',
mode: 'out-in'
}
}
/* global css */
.layout-enter-active,
.layout-leave-active {
transition: opacity 0.5s;
}
.layout-enter,
.layout-leave-active {
opacity: 0;
}
Nuxt version: 2.14.5
Any updates on this? In my case i want the page transition hooks in layouts. Because i want the same transition (and other things) when i navigate from the error layout to default layout. Thanks. đ
@galvez We would appreciate if you could give us some feedback, can we expect a fix soon? đ
Is this still relevant? Can you please answer whether this will be implemented or maybe you have some workaround? This would give us more advanced control over transitions (for example, adding complex transitions with gsap or animejs).
Any news on this? Another year passed and it's not even mentioned in documentation.
In case anyone is interested in my - kind of - ugly quickfix:
I added a container to the app.html that's only purpose is to get in/out of the view on a route change (enter from bottom / exit to top). as there are no js transition hooks for layouts I used the router beforeEach and afterEach guards to kinda rebuild the default transition. the hooks are added via a plugin. in my case, I only use 1 transition for both, pages & layouts. with extensions like vue-meta-router this could also be kind of extended.
<!-- app.html -->
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
<!-- container for transition -->
<div id="transition"></div>
</body>
</html>
// transition.client.js
let transitionEl = null
export default function ({ app }) {
if (!transitionEl) transitionEl = document.getElementById('transition')
app.router.beforeEach((to, from, next) => {
transitionEl.classList.add('is-active', 'in')
next()
})
app.router.afterEach((to, from) => {
// check if active
if (transitionEl.classList.contains('is-active')) {
// so this is the ugly part here with 2 timeouts to await the transition.
// could also be solved via an animation tbh, but this kinda replicates the `done` function
setTimeout(() => { // first timeout waits for enter-transition (lasts 800ms, that's why timeout = 800)
transitionEl.classList.add('out')
setTimeout(() => { // second timeout waits for exit-transition (also 800ms duration)
transitionEl.classList.remove('is-active', 'in', 'out') // clears stuff so that it starts from bottom again
}, 800)
}, 800)
}
})
}
We are approaching the Nuxt 2 EOL date (June 30, 2024) - see this article for more information. I'm closing this issue as it's marked as a Nuxt 2 related enhancement and it's not a critical issue.
That doesn't mean it might not be relevant for Nuxt 3. If it is, please feel free to open a new issue (or just comment, and I can reopen it). đ
Thank you for your understanding and for your contribution to Nuxt! đ
