<div id="app">
	<button v-on:click="show = !show">表示切り替え</button>
	<transition>
		<div v-show="show" class="box">BOX</div>
	</transition>
</div>
#app {
  text-align: center;
  padding-top: 20px;
}
button {
  font-size: 15px;
  margin-bottom: 20px;
  border: none;
  color: #fff;
  background: #48c2cd;
  padding: 10px 20px;
  cursor: pointer;
  outline: none;
  border-radius: 5px; 
}
.box {
  background: #eee;
  padding: 100px;
  width: 100px;
  text-align: center;
  margin: 0 auto;
}

/* アニメーション中のスタイル */
.v-leave-active,
.v-enter-active {
  transition: opacity 1s;
}
.v-enter,
.v-leave-to {
  opacity: 0;
}
new Vue({
  el: '#app',
  data: {
    show: false
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js