Intermediate LevelVue JS
Why is mode="out-in" critical for smooth element transitions in Vue?
❓ Interview Prompt: Explain Transition modes (out-in vs in-out), preventing layout jumpiness, and animating element swaps.
When animating transitions between two swapping elements (e.g. toggling a button label between 'Edit' and 'Save'), Vue's default transition mode mounts the entering element at the exact same time as the leaving element.
Layout Jumpiness Problem:
During the transition duration, both elements exist simultaneously in the DOM, causing layout displacement and jumpiness!
Solution - 'mode="out-in"':
Setting 'mode="out-in"' instructs Vue to wait for the leaving element to complete its exit animation and unmount BEFORE starting the enter animation for the new element!
Code Implementation Example
html
<template>
<!-- mode="out-in" prevents simultaneous overlapping elements during transition -->
<Transition name="fade" mode="out-in">
<button v-if="isEditing" key="save" @click="isEditing = false">Save</button>
<button v-else key="edit" @click="isEditing = true">Edit</button>
</Transition>
</template>💡Preventing element overlap during transitions using mode="out-in".
🎯 Interview Key Takeaway
Use mode="out-in" on <Transition> to complete the leaving animation before mounting the entering element.
#Transition#Animation#Intermediate
Back to all Vue JS Questions→