JSFiddle - React, Tailwind, and code Playground

by disfated

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

<div class="container">
  <h3 class="text-muted">Animations</h3>
  <hr>
      
  <div id="app" hidden>
    <transition name="fade" appear>
    <div>
      <div class="navbar" style="min-height: auto">
        <button class="btn btn-default" @click.prevent="list++">Add item</button>
        <button class="btn btn-default" @click.prevent="list ? list-- : list">Remove item</button>
      </div>
      <div class="list-group">
        <transition enter-active-class="animated bounceIn" leave-active-class="animated flipOutX faster" v-for="index in list">
        <a href="#" class="list-group-item" :key="index">
          <h4 class="list-group-item-heading">Item {{ index }}</h4>
          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        </a>
        </transition>
      </div>
    </div>
    </transition>
  </div>
</div>

CSS

.navbar {
	user-select: none;
	min-height: auto;
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	show1: true,
    list: 2
  },
  mounted() {
  	debugger;
  	this.$el.hidden = false;
  }
});