vue添加购物车效果

// vue中的动画 当dom显示或者隐藏时 vue可以管理动画 
//  transition 单元素动画
<transition name=""
  @before-enter="beforeEnter"
  @enter=""
  @after-enter=""
   @before-leave=""
   @leave=""
   @after-leave=""
> </transition>
  v-enter {} 进入的一瞬间
  v-enter-active{}
  v-enter-to{}
  v-leave{}
  v-leave-active{}
   v-leave-to{}
methods: {
  before-enter(el) {
    el.style.background = 'yellow'
  }，
  enter(el, done) { // velocity
    el.style.background = 'red'
    setTimeout(() => {
      done()  // 调用done才能执行afterEnter
    }, 1000)，
    afterEnter () {
}
  }
}
<div v-for="(p, index) in products" ref="lists">
  <img :src="p" alt="">
  <button @click="addCart(index)">添加购物车</button>
</div>
<transition @enter>
  <div class="animate" v-if="isShow"></div>
</transition>
  <div class="cart"></div>
enter(el, done){
  let div =  this.$refs.lists[this.currentIndex]
  let  {x, y} = getBoundingClientRect()
  el.style.left = x + 'px'
  el.style.top = y + 'px'
  el.style.background = `url()`
  el.addEventListener('transitionEnd', done)
}
after-enter() {
  this.isShow = false
}
addCart(index) {
  this.currentIndex = index
  this.isShow = true
}