vue添加购物车效果

// vue中的动画 当dom显示或者隐藏时 vue可以管理动画 
//  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 () {
}
  }
}

  
  添加购物车


  


  

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
}