JSFiddle - React, Tailwind, and code Playground

by Roland Doda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <transition name="testanim" mode="in-out">
  <p key="1" v-if='open1' @click='open1 = false'>First Block</p>
  <p key="2" v-if='!open1' @click='open1 = true'>Second Block</p>
</transition>
</div>

CSS

.testanim-enter-active,
.testanim-leave-active {
  transition: all .5s;
}

.testanim-enter,
.testanim-leave-to {
  transform: translateX(1rem);
  opacity: 0;
}

.testanim-leave-active {
  /* position: absolute; */
}

.testanim-move {
  transition: all .5s;
}

JavaScript

Vue.component("test-sth", {
  template: `
    <transition name='testanim'>
      <p v-if='open' @click='open = !open'>Can You See Me?</p>
    </transition>
  `,
  data: () => ({
    open: true,
  }),
})

new Vue({
  el: "#app",
  data() {
  return {
  open1: true,
  open2: true,
  }
  }
})