Vue 3 + Transition appear

by ktsn

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  <transition>
    <div v-show="show">Test</div>
  </transition>
  
  <transition></transition>
</div>

CSS

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

.v-enter-from {
  opacity: 0;
}

.v-enter-to {
  opacity: 1;
}

JavaScript

const App = {
	data() {
    return {
	    show: false
    }
  },
  
  mounted() {
    this.show = true
  }
}

Vue.createApp(App).mount('#app')