<template> <h1>The 'enterActiveClass' Prop</h1> <button @click="this.exists = !this.exists">{{btnText}}</button><br> <Transition enter-active-class="entering"> <p v-if="exists">Hello World!</p> </Transition> </template> <script> export default { data() { return { exists: false } }, computed: { btnText() { if(this.exists) { return 'Remove'; } else { return 'Add'; } } } } </script> <style> .entering { background-color: lightgreen; animation: added 1s; } .v-leave-active { background-color: lightcoral; animation: added 1s reverse; } @keyframes added { from { opacity: 0; translate: -100px 0; } to { opacity: 1; translate: 0 0; } } p { display: inline-block; padding: 10px; border: dashed black 1px; } </style>

 import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.mount('#app')