Vue关于动画过渡,关于自定义class

想做个小球掉落的动画,但是当小球掉落下来就没有了,应为我没有设置样式,但是如果设置了样式,就不会执行掉落的动画

</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>
阅读 1.8k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题