Vue's transition system hooks into ordinary CSS transitions and animations through a small set of well-known class names. There are six core classes that cover every stage of an element's enter and leave. The enter sequence is v-enter-from, v-enter-active, and v-enter-to, while the leave sequence is v-leave-from, v-leave-active, and v-leave-to. Naming a <Transition> swaps the v- prefix for your own (for example my-transition-enter-from), which lets multiple transitions coexist without colliding and keeps CSS namespaced to the feature they drive.
The most commonly tuned knob on <Transition> is mode, which controls how an entering element and a leaving element overlap. With mode="out-in", Vue waits for the leaving element to finish its transition before inserting the entering element, producing a clear "one then the other" cadence that often feels more orderly than simultaneous crossfades. Other modes, or omitting mode altogether, produce different choreography, but out-in is the safest default when both elements occupy the same visual space and a simultaneous swap would visibly overlap.
Lists have their own rules, and the central one is the key attribute on items rendered with v-for. Keys tell Vue the identity of each element so it can preserve them across moves, insertions, and removals rather than tearing down and rebuilding the DOM each time. Stable, unique keys prevent reuse bugs such as broken form state, flickering transitions, and stale event listeners. Choosing a key whose value stays tied to the item's identity (usually a database id rather than the array index) is a small habit with outsized correctness benefits.