<div id="app" class="app">
  <button @click="show = !show">
    Toggle
  </button>
  
  <transition 
     enter-active-class="animate__animated animate__bounceIn"
     leave-active-class="animate__animated animate__bounceOut">
    <p v-if="show">hello</p>
  </transition>
</div>

html, body {
  display: grid;
  justify-content: center;
  align-content: center;
  height: 100%;
  
  font-family: sans-serif;
  font-size: 1rem;
}

.app {
  display: grid;
  grid-template-rows: 1fr;
  align-content: center;
  justify-items: center;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

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

const app = Vue.createApp({
   data: function () {
    return {
      show: true
    }
  }
})

const vm = app.mount('#app')