想做个小球掉落的动画,但是当小球掉落下来就没有了,应为我没有设置样式,但是如果设置了样式,就不会执行掉落的动画
</head>
<body>
<div id="app">
<button @click="exchange">
<span v-if="bool">点击小球掉落</span>
<span v-else>点击小球滚动</span>
</button>
<transition
name="ball"
enter-class="enter1"
enter-active-class="enter2"
enter-to-class="enter3"
>
<child v-if="bool" :class="a"></child>
</transition>
</div>
<script type="text/x-template" id="template1">
<div></div>
</script>
<script>
new Vue({
el:"#app",
data:{bool:true,
a:''},
methods:{
exchange:function() {
this.bool = !this.bool;
}
},
components:{
child:{
template:"#template1",
}
},
})
</script>
</body>
</html>