前端学习笔记-8.12.vue2.0学习饿了么购物车小球动画

思路：子组件把信息传递给父组件，父组件再传递给另一个子组件。
要实现：通过点击加号，出现小球抛物线落入购物车。
只需考虑小球drop-enter-active的状态，运用emit和on派发和监听事件，cartcontrol派发事件this.$emit(‘cart-add’, event.target)，good.vue监听事件cart-add，并添加监听函数<cartcontrol v-on:cart-add="_drop" :food="food"></cartcontrol>
在监听函数中拿到shopcart的dom对象,返回shopcart.vue编写drop函数，获取小球的初始位置（x,y）坐标，实现beforeEnter,enter和afterEnter方法，完成动画。

1.定义小球，初始隐藏。
//0.4秒用5个小球正合适，若时间增长需增加小球数量。

inner在这当做小球，添加inner的基础样式

首先要得到加号的位置，它是动态的。点击加号会触发事件，可以在cartcontrol中添加派发事件，将他的dom对象传出来，即在点击事件中添加派发事件，在cartcontrol.vue的methods方法中添加事件，在addCart(event) {this.$emit(‘cart-add’, event.target)}。

2.在父组件goods.vue中对_drop监听并且添加处理事件（传入target）。
//1.0里’cart.add’,不报错也不显示小球

在methods添加方法

同时在头部的cartcontrol添加

还要记得添加ref.
//1.0里是v-ref:“shopcart”，这样写了总报warn

3.回到shopcart写drop等方法


css加了个贝塞尔曲线