new Vue({
el: '#root',
data: {
show: false
}
})
<div id="root">
<transition>
<h1 v-show="show">hello world</h1>
</transition>
<button @click="show = !show">toggle</button>
</div>
@keyframes bounce-in {
0% {
transform:scale(0);
}
50% {
transform:scale(1.5);
}
100% {
transform:scale(1);
}
}
.v-enter-active {
animation:bounce-in 1s;
}
.v-leave-active {
animation:bounce-in 1s reverse;
}