<div id="root">
<button @click="show = !show">切换</button>
<transition name="bounce">
<p v-if="show">文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</p>
</transition>
</div>.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}var vm = new Vue({
el: '#root',
data: {
show: true
}
})
External CSS
This Pen doesn't use any external CSS resources.