Can the <transition> element be used to animate individual page elements in a nuxtjs application? - vue.js

Question

Can someone tell me if the transition element can be used on page elements for animations in nuxt? I have seen the doc regarding page transitions, but I want to animate a number of different page elements. What I have so far does not appear to be working.
In a simple Header component, I have this:
<template>
<transition name="menu-popover">
<ul class="MenuPopover">
<li>Payments</li>
<li>Subscriptions</li>
<li>Connect</li>
</ul>
</transition>
And in the style tag of that component:
<style scoped>
.menu-popover-enter {
opacity: 0;
transform: rotateY(50deg);
}
.menu-popover-enter-to {
opacity: 1;
transform: rotateY(0deg);
}
.menu-popover-enter-active {
transition: opacity, transform 200ms ease-out;
}

Answer 1

Solution 1:
Look into the Nuxt Guide: Page Transition, it introduces how to implement the transition for each page (or specific pages Nuxt API: Page Transition) step by step very well.
Solution 2 (not recommend, but if really prefer to uses <nuxt /> inside one <transition> manually):
Steps:
put <nuxt> inside <transition>, like <transition name="test"><nuxt v-show="pageShow"/></transition>
add css class for transition effects,
css will be like:
.test-enter {
opacity: 0;
transform: rotateY(50deg);
}
.test-leave-to {
opacity: 0;
transform: rotateY(100deg);
}
.test-enter-active,.test-leave-active {
transition: all 2s ease-out;
}
add one handler for router navigator (or like button click event which will trigger route change).
The handler will be like below:
changePage: function (newUrl) {
this.pageShow = false //hide current page to trigger the transtion for `leave` current page
setTimeout(()=> {
this.pageShow = true //show new page, it will trigger the transition for `enter` new page
this.$router.replace(newUrl) //with new url
}, 2000) // delay 2s (after the transition of previous page finishes)
}