Attempting to implement a dynamic transition name for Nuxt page transitions as shown below:
export default{
data() {
return {
prevHeight: 0,
transitionName: 'page'
};
},
transition: {
name: this.transitionName,
beforeLeave(el) {
this.prevHeight = getComputedStyle(el).height;
},
enter(el) {
const { height } = getComputedStyle(el);
el.style.height = this.prevHeight;
setTimeout(() => {
el.style.height = height;
}, 0);
},
afterEnter(el) {
el.style.height = 'auto';
}
}
}
This code will be mixed in all page components.
Encountered two bugs:
https://i.sstatic.net/F7YcB.pngCannot read property 'transitionName' of undefined
- The
prevHeightattribute does not change when redirecting to other pages. Added a watcher like this:
Nothing prints in the console.watch: { 'prevHeight'(height){ console.log(height) } }
Tried fixing it by using a callback function instead of an object like this:
transition(){
return {
...
};
}
Unfortunately, it didn't work.
How can I achieve this? Read the document (Nuxt transitions) but found no solution.
Thank you!