What are Transition and TransitionGroup used for?

<Transition> and <TransitionGroup> are built-in components that apply enter/leave CSS transition or animation classes automatically when an element or list of elements is inserted, removed, or reordered.

<Transition name="fade">
  <p v-if="show">Hello</p>
</Transition>

<style>
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>

<TransitionGroup> extends this to lists (v-for), also animating position changes (using FLIP technique) when items are reordered. It renders a real wrapper element by default (span unless overridden with tag), unlike <Transition> which doesn't add a wrapper.