（饿了么商家点餐页面Vue实战项目）Vue2.0商品详情页面 复用 商品列表页面 购物车小球贝塞尔曲线飞入效果

商品列表购物车小球飞入效果实现参照：
https://blog.csdn.net/weixin_40618068/article/details/98198377

一、创建food.vue，作为商品详情页面组件，在goods.vue（商品列表）页面引用。点击具体商品跳转到商品详情页。
food.vue的html代码如下：

<template>
    <transition name="move">
        <div v-show="showFlag" class="food" ref="food">
            <div class="food-content">
                <div class="image-header">
                    <img class="food-img" :src="food.image">
                    <div class="back" @click="hide">
                        <i class="icon-arrow_lift"></i>
                    </div>
                </div>
                <div class="content">
                    <h1 class="title">{
   {
   food.name}}</h1>
                    <div class="detail">
                        <span class="sell-count">月售{
   {
   food.sellCount}}份</span>
                        <span class="rating">好评率{
   {
   food.rating}}%</span>
                    </div>
                    <div class="price">
                        <span class="now">¥{
   {
   food.price}}</span><span class="old" v-show="food.oldPrice">¥{
   {
   food.oldPrice}}</span>
                    </div>
                </div>
                <div class="cartcontrol-wrapper">
                    <cartcontrol :food="food" @cart-add="handlecartAdd"></cartcontrol>
                </div>
                <transi