小球半场动画

小球动画（vue半场动画）

小球掉入口袋

 以下为html代码

<!-- 控制开关 -->
<button @click="show = !show">按钮</button>
<!-- 给要进行动画的元素包括一个transition标签 -->
   <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <div id="ball" v-if="flag"></div>
    </transition>

以下为JS代码

 <script>
export default {
  data() {
    return {
      flag: false,
    };
  },

  //   如果要实现加入购物车的小球动画，是一个半场动画，需要用到动画的钩子函数

  methods: {
    beforeEnter(el) {
      //这个钩子函数代表动画开始之前，动画还未开始，这个时候可以设置动画的初始样式
      >这里也可以用top/right 来控制起始位置
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      el.offsetWidth;
      //刷新动画 没有实际作用但是必须要加这个代码

	>这里也可以用top/right 来控制结束位置
      el.style.transform = "translate(280px,450px)";
      el.style.transition = "all 4s linear";
      done();
    },
    afterEnter() {
      this.flag = false;
    },
  },
};
</script>

以下为style代码（样式自己调）

<style>
.ball {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f56c6c;
  z-index: 9999;
}
</style>