JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.min.js"></script>
<!DOCTYPE html>
<title>Vue app</title>
<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <button @click="isShown = !isShown">
    表示の切り替え
  </button>
  <transition>
    <p v-show="isShown">
      Hello, world!
    </p>
  </transition>
</div>

CSS

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

.v-enter {
  opacity: 0
}

.v-enter-to {
  opacity: 1
}

.v-leave {
  opacity: 1
}

.v-leave-to {
  opacity: 0
}

JavaScript

new Vue({
	el: '#app',
  data: function() {
  	return {
   		isShown: false
    }
  }
})