<template> <h1>JavaScript Transition Hooks</h1> <p>This code hooks into "after-enter" so that after the initial animation is done, a method runs that displays a red div.</p> <button @click="pVisible=true">Create p-tag!</button><br> <Transition @after-enter="onAfterEnter"> <p v-show="pVisible" id="p1">Hello World!</p> </Transition> <br> <div v-show="divVisible">This appears after the "enter-active" phase of the transition.</div> </template> <script> export default { data() { return { pVisible: false, divVisible: false } }, methods: { onAfterEnter() { this.divVisible = true; } } } </script> <style scoped> .v-enter-active { animation: swirlAdded 1s; } @keyframes swirlAdded { from { opacity: 0; rotate: 0; scale: 0.1; } to { opacity: 1; rotate: 360deg; scale: 1; } } #p1, div { display: inline-block; padding: 10px; border: dashed black 1px; } #p1 { background-color: lightgreen; } div { background-color: lightcoral; } </style>

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