vue过渡动画的坑

记个vue过度动画的坑

不知道大家有没有遇到
需求是 一个div 默认需求是隐藏，然后在偏移的过程中显示 到达目标的时候再隐藏，
然后遇到了一个坑 在afterEnter中取非的时候 会导致全程隐藏 一致没能理解 发现是结束动画被立马调用了

图片.png

解决很简单就是在使用afterEnter的时候给他增加一个透明度
这样子的话它取非的时候到一个偏移的过程他就会透明度变成一然后再取非

图片.png

··

beforeEnter(el){
          el.style.transform = 'translate(0, 0)'
        },
        enter(el, done){
          el.offsetWidth
          el.style.transform = 'translate(23px, 430px)'
          el.style.transition = 'all 1s ease'
          done()
        },
        afterEnter(el){
          el.style.opacity = 1
          this.ballFlag = !this.ballFlag
        },