Vue2实现动画的方式可以是css也可以js钩子,大部分情况下css3即可满足,但若是需要在实现动画过程中进行位置计算,那就需要使用js钩子函数来进行,接下来说一说踩钩子函数这个坑出现的疑惑点。官方文档:vue2动画钩子
1.首先实现一个钩子函数的过程是,在transition中监听beforeEnter等,官网有一句话是当只用javascript过渡时,必须调用done(),问题在于这个done()怎么调用,若是按照以下直接调用done(),那么问题来了,假设只是简单的单一元素进行过渡,那么在enter的动画实现过程是没有问题,在leave会有问题,单一节点里再包裹节点那么enter与leave都会有问题,问题在于fade-enter-active等类名会存在跳转问题,导致动画过渡出现问题,那么解决方法就是将done方法在监听到transitionend之后调用,animationend也是类似,done()的实际也是调用afterEnter,afterLeave
el.addEventListener('transitionend', done);
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/05fbf0f26e022bad86fe683a2f78c6bd.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9da19aa2361f8cba808538ba1e765932.png)
其实在查看官方给的示例也可以发现,done方法是在动画结束之后调用的。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/75b2259a9f51b424d0599341f61ba89f.png)
2.在enter,leave一定要执行的代码是执行浏览器重绘,重绘的方式有很多种,一般采用不影响元素的方式,如
el.offsetHeight;
- done()的实际也是调用afterEnter,afterLeave方法,在我们正常调用afterEnter之后,afterEnter的方法会立即执行,而在动画执行完成之后,vue还会执行一个去除与动画有关的类的活动,这个活动需要时间,那么假设我们在afterEnter里调用了vue监听的数据,那么vue会在执行完成撤除类之后对这些值进行视图更新,那么如果我们由这个值来控制显示元素的话,就会有一点小小的间隔时间,可能不影响整体动画,但若是你需要的恰恰是到达即消除,如购物车抛物线小球到达马上消失,你需要做的是
将v-if改成v-show,之后在afterEnter里加入el.style.display = ‘none’,这个代码会立即执行。
踩坑持续中。。。