JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

<script src='https://unpkg.com/vue@2.4.4/dist/vue.js'></script>

<div id='app'>
   <transition name='flip' mode='in-out'>
     <div class='box' v-if='showOdd'></div>
  </transition>
  <hr />
  <button @click='toggle'>Flip</button>
  <hr />
  <ul>
    <transition-group name='flip'>
      <li @click='removeItem(k)' v-for='(i, k) in collection' key='k'>{{i}}</li>
    </transition-group>
  </ul>
</div>
</style>

CSS

.box {
  width: 50px; height: 50px; background: red;
}

.flip-enter-active {
  animation: flip-in 0.5s ease-out forwards;
}

.flip-leave-active {
  animation: flip-out 0.5s ease-in forwards;
}

@keyframes flip-in {
  from {
    transform: rotateY(90deg);
  }
  to {
    transform: rotateY(0deg);
  }
}

@keyframes flip-out {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(90deg);
  }
}

JavaScript

new Vue({
  el: '#app',
  data: {
    showOdd: true,
    collection: [1, 2, 3, 4, 5, 6, 7, 8]
  },
  methods: {
    toggle () {
      this.showOdd = !this.showOdd;
    },
    removeItem (k) {
      this.collection.splice(k, 1);
    }
  }
})