JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <div style="height: 120px;">
    <transition>
      <!-- 這裡透過 v-show 來控制顯示或隱藏 -->
      <div class="block" v-show="isShow">HELLO VUE</div>
    </transition>
  </div>

  <button @click="isShow =! isShow">Toggle</button>
</div>

SCSS

#app {
  position: relative;
  display: block;
  padding: 1rem;
  font-size: 1rem;
}

button {
  font-size: 1rem;
}

.block {
  display: block;
  width: 150px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: #0f0;
  
}

.v-enter-active, .v-leave-active {
  transition: opacity 1s;
}

.v-enter-from, .v-leave-to {
  opacity: 0;
}

.v-enter-to, .v-leave-from {
  opacity: 1;
}

JavaScript

const app = Vue.createApp({
  data() {
    return {
      isShow: true
    }
  }
});

app.mount('#app');