After setting up a navbar that switches between two components, I encountered an issue with the fade-in animation not running when the page is first opened. The animation only works when using the navbar links to switch components. Any suggestions on how to fix this?
P.S. The components in question are simply <h1>Home</h1> and <h1>About</h1>.
HTML:
<div id="app">
<transition name="view">
<router-view/>
</transition>
</div>
JS (Router):
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: { name: 'home-route' }
},
{
path: '/home',
name: 'home-route',
component: HomeComponent
},
{
path: '/about',
name: 'about-route',
component: AboutComponent
}
]
})
CSS (Animation):
.view-leave-active {
transition: opacity 0.5s ease-in-out, transform 0.5s ease;
}
.view-enter-active {
transition: opacity 0.5s ease-in-out, transform 0.5s ease;
transition-delay: 0.5s;
}
.view-enter, .view-leave-to {
opacity: 0;
}
.view-enter-to, .view-leave {
opacity: 1;
}