vue半场动画之加入购物车

 <div @click="flag=!flag">加入购物车</div>
    <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
    </transition>

 methods: {
    beforeEnter(el) {
      el.style.transform = "translate(0,0)"//起始样式
    },
    enter(el, done) {
      el.offsetWidth; //有这行才有动画效果
      el.style.transform = "translate(200px,400px)";//结束状态
      el.style.transition = "all 1s ease";
      done(); //执行done函数才会执行afterEnter
    },
    afterEnter(el) {
      this.flag = !this.flag;
    },
  },

.ball {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: red;
}

这半场动画是通过控制它的显示隐藏来实现的