实现动画效求
1、先写好小球，确定小球的最终位置以及小球运动的轨迹，这里小球运动的轨迹是贝塞尔曲线，并且使用v-if=false将小球隐藏
html:
css:
2、触发小球的状态改变，这里我使用的场景是，点击添加购物车，
然后就将小球的v-if=true，同时将此时被点击的dom元素记录。
此时小球的状态改变触发了小球过渡的动画。
3、先分析动画的beforeEnter钩子函数，这个阶段是入场前的回调
做了些什么呢？
- 获取到记录被点击的元素dom,也就是此时添加购物车的“+”号
- 根据DOM获取当前点击位置
- 算出点击位置距离小球终态的x和y
- 将beforeEnter中的事件el（即移动中的小球），将小球平移到y的位置也就是点击的高度地
- 获取小球包裹的inner，小球此时在y处进行x移动
以上就是beforeEnter前小球的状态
4、这个阶段就是小球进入动画回调的阶段
这里要注意，小球动画的过程需要触发重绘和重排，这列使用window.innerHeight属性
- 设置小球的终态，相当于坐标轴中的(0,0)，哈哈，也就是小球要回到的地方
- 同样冲el和inner两个去设置小球的x和y
- 过渡完成后执行的事件，就是需要done回调
4、最后结束动画，将小球隐藏，同时也将小球设置为none