Encapsulated wrapper transition component

transition-component.vue

<template>
  <transition name="fade" v-bind="$attrs" v-on="$listeners">
    <slot></slot>
  </transition>
</template>
<script>
export default {};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

...

<fade-transition mode="out-in">
  <div key="blue" v-if="show" class="box"></div>
  <div key="red" v-else class="red-box"></div>
</fade-transition>