参考: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、效果图