I am attempting to implement a smooth transition between my Vue components with the following code:
<template>
<div id="app">
<router-link to="/">Go to home</router-link>
<router-link to="Register">Go to register</router-link>
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
}
Despite implementing this code, the transition is not functioning as expected. The component switches occur properly, but there is no transition effect present.
I have thoroughly reviewed the Vue and Vue Router documentation, and it seems that I am adhering to their guidelines. Can anyone point out what could be missing or incorrect in my implementation?