JSFiddle - React, Tailwind, and code Playground

by ginpei

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="app">
  <button v-on:click="toggle_onClick">開閉</button>
  <transition>
    <div v-show="visible" class="box">
      <p>やっほー</p>
    </div>
  </transition>
</div>

CSS

.box {
  background-color: black;
  border: 1px solid #9cf;
  transition: all 3s;
}
.v-enter {
  opacity: 0;
  background-color: blue;
}
.v-enter-active {
  opacity: 1;
  background-color: red;
}
.v-leave {
  opacity: 1;
  background-color: green;
}
.v-leave-active {
  opacity: 0;
  background-color: yellow;
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    visible: false,
  },
  methods: {
    toggle_onClick: function(event) {
      this.visible = !this.visible;
    },
  },
});