👀 Views: 14 💬 Answers: 1 📅 Created: 2025-06-17

vue transition animation Vue

I'm performance testing and I'm working with a scenario with animating transitions between components in Vue 3 when using `v-if`. I've set up a simple toggle to switch between two components, and while the animations work initially, they seem to break when switching back and forth rapidly. For instance, when I click the toggle button multiple times quickly, the transition does not complete as expected and I sometimes see both components rendered at the same time briefly. Here’s a stripped-down version of my code: ```vue <template> <div> <button @click="toggle">Toggle Component</button> <transition name="fade"> <component :is="currentComponent" v-if="showComponent" /> </transition> </div> </template> <script> export default { data() { return { showComponent: true, currentComponent: 'ComponentA' } }, methods: { toggle() { this.showComponent = false; setTimeout(() => { this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'; this.showComponent = true; }, 300); // Duration of the fade transition } } } </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> ``` I've tried adjusting the timing in the `setTimeout` to match the animation duration, but that hasn't resolved the scenario. Additionally, I'm wondering if there's a better way to manage the transitions or perhaps a way to ensure that the component fully leaves before the next one enters. Any advice on optimizing this or debugging the behavior would be greatly appreciated! This is happening in both development and production on Linux. Could someone point me to the right documentation?