I am working on implementing transitions for dynamic components in vue.js v2.6.11. I have thoroughly reviewed the documentation on Transitioning Between Components, but I am facing difficulties in achieving the desired results.
To troubleshoot, I have created a sample on codesandbox with various trial and error attempts. Below is the essential code snippet that should ideally facilitate the transition.
template
<template>
<div id="app">
<button @click="toggle = !toggle">Toggle</button>
<transition class="component-fade" mode="out-in">
<component :is="currentComp" val="msg" :key="currentComp" />
</transition>
<transition class="component-fade" mode="out-in">
<div v-if="toggle">test</div>
<p v-else>Sorry, no items found.</p>
</transition>
</div>
</template>
script
<script>
export default {
name: "App",
data() {
return {
toggle: true
};
},
components: {
home2: {
template: `<h1>home2</h1>`,
},
"about-us2": {
template: `<h1>about2</h1>`,
},
},
computed: {
currentComp() {
return this.toggle ? "home2" : "about-us2";
},
},
};
</script>
Style
<style scoped>
.component-fade-enter-active,
.component-fade-leave-active {
transition: all 6s ease;
}
.component-fade-enter,
.component-fade-leave-to {
opacity: 0;
}
</style>
Explanation of code:
Upon clicking the toggle button, the components will switch based on the computed value using the :is attribute of <component>. A basic transition effect (opacity change) is applied during this component switch.
Please let me know if there are any aspects in my code that need improvement or modification.