I've been exploring ways to create seamless page transitions using Vue and Vue-Router.
By loading different pages (components) directly into the router-view, I've achieved a smooth animation effect.
While I have successfully implemented a great animation for all my pages, I am now faced with the challenge of customizing transitions based on the router-link that is clicked.
If the route-link has a special class, apply a different animation.
App.vue
<template>
<div id="app">
<nav>
<router-link to="/1">Page 1</router-link>
<router-link to="/2">Page 2</router-link>
<router-link to="/3">Page 3</router-link>
<router-link class="special" to="/4">Page 4</router-link>
</nav>
<transition @enter="enter" @leave="leave">
<router-view/>
</transition>
</div>
</template>
<script>
export default {
...
methods: {
enter(el, done) {
// main page animation with a timeline using Greensock
},
leave(el, done) {
// main page animation with a timeline using Greensock
}
},
}
</script>
How can I achieve this functionality?
When the user clicks on a router-link with a special class, update
<transition @enter="enter" @leave="leave">
<router-view/>
</transition>
to:
<transition @enter="enterSpecial" @leave="leaveSpecial">
<router-view/>
</transition>
in order to incorporate
methods: {
enter(el, done) {
// main page animation with a timeline using Greensock
},
leave(el, done) {
// main page animation with a timeline using Greensock
}
},
Despite thorough research in the documentation and online resources, I have not been able to find a solution to this issue.