JSFiddle - React, Tailwind, and code Playground

by ktsn

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <transition mode="in-out">
    <div v-if="test" key="a">
      A
    </div>
    <div v-else key="b">
      B
    </div>
  </transition>
  
  <button @click="test = !test">Toggle</button>
</div>

CSS

.v-enter-active,
.v-leave-active {
  transition: 500ms ease-out;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

JavaScript

const App = {
  data() {
    test: true
  }
}

createApp(App).mount('#app')