I am facing an issue where the Vue transition is not working as expected for my dynamic components. Check out my code snippet below:
<template>
<div>
<component :is="currentView" transition="fade" transition-mode="out-in"></component>
<button class="btn btn-info" @click="currentView='category'">Cat</button>
<button class="btn btn-info" @click="currentView='catvideo'">video</button>
</div>
</template>
<script>
Vue.component('category', require('./category.vue'));
Vue.component('catvideo', require('./catvideo.vue'));
export default {
data(){
return {
currentView: 'category',
cat:cat,
showCat:false,
showVideo:false
}
}
}
</script>
<style>
.fade-transition {
transition: opacity 0.2s ease;
}
.fade-enter, .fade-leave {
opacity: 0;
}
</style>
In the category.vue file located in a separate folder, there is a loop over some data. The catvideo.vue file contains simple static HTML.
Thank you for your help.