关于小球动画的几个问题

Question

老师，看了你的2.0源码，我有几个问题想请教一下

1、before-enter、enter、after-enter这三个钩子是因为改变了v-show的值，使他由false变为true所以才启动的吗？

2、transition上的这三个钩子必须同时使用吗？

3、为什么要在dropping函数中把transform都设为translate(0,0,0)，动画的最终位置不是写在css里的样式吗？

4、dropping函数里为什么最后要加 el.addEventListener('transitionend', done); 监听事件？我也没有找到done这个函数啊？

麻烦老师了！！！万分感激！！！！

Answer 1

ustbhuangyi 2017-12-20 01:25:33

1. v-show 的值改变是触发动画的一个条件，动画过程会依次执行这几个钩子函数。
2. 钩子是 Vue 提供给你在整个动画过程中操作的时机，需不需要都用看你实际的需求。
3. translate(0,0,0) 是让小球归位，小球原本就是在购物车里的。
4. done 函数是参数啊，enter 钩子函数的第二个参数就是 done

• 提问者 慕盖茨9754587 #1

  多谢！