vue2 动画javascript钩子

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);

---

其实在查看官方给的示例也可以发现，done方法是在动画结束之后调用的。

2.在enter，leave一定要执行的代码是执行浏览器重绘，重绘的方式有很多种，一般采用不影响元素的方式，如

el.offsetHeight;

---

3. done()的实际也是调用afterEnter，afterLeave方法，在我们正常调用afterEnter之后，afterEnter的方法会立即执行，而在动画执行完成之后，vue还会执行一个去除与动画有关的类的活动，这个活动需要时间，那么假设我们在afterEnter里调用了vue监听的数据，那么vue会在执行完成撤除类之后对这些值进行视图更新，那么如果我们由这个值来控制显示元素的话，就会有一点小小的间隔时间，可能不影响整体动画，但若是你需要的恰恰是到达即消除，如购物车抛物线小球到达马上消失，你需要做的是

将v-if改成v-show，之后在afterEnter里加入el.style.display = ‘none’，这个代码会立即执行。

踩坑持续中。。。

---

本文来自 编程路沙漠行者 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/qq_32524473/article/details/81147742?utm_source=copy