参考&＃xff1a;vue官网
1、代码
<!DOCTYPE html>
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><title>过渡&动画2</title><style>.bounce-enter-active {animation: bounce-in 1s;}.bounce-leave-active {animation: bounce-in 1s reverse;}&＃64;keyframes bounce-in {0% {transform: scale(0);}50% {transform: scale(1.5);}100% {transform: scale(1);}}</style>
</head>
<body>
<div id&＃61;"demo"><button &＃64;click&＃61;"show&＃61;!show">test</button><br><transition name&＃61;"bounce"><p v-if&＃61;"show" style&＃61;"display: inline-block">hello world !</p></transition>
</div><script type&＃61;"text/Javascript" src&＃61;"../js/vue.js"></script>
<script>new Vue({el:"#demo",data:{show:true}})
</script>
</body>
</html>
2、效果图
京公网安备 11010802041100号