vue.js加入购物车小球动画

• 在购物车组件Cart.vue中，添加小球代码

---

 <template>

<div class="shop-cart">

<div class="content">
    <div class="shop-left">
        <!--购物车logo区域-->
        <div class="logo-wrapper">
            <div class="logo" :class="{'logobg':(selectcount > 0)}">
                <span class="icon-shopping_cart"></span>
            </div>
            <!--购物车中商品的数量-->
            <div class="num" v-show="selectcount">{{selectcount}}</div>
        </div>
        <!--总价格区域-->
        <div class="total-price border-right"
             :class="{'pricebg':(selectcount > 0)}">￥{{totalPrice}}</div>
        <div class="shipping-fee">
            另需配送费￥{{deliveryPrice}}元
        </div>
    </div>
    <!--结算区域-->
    <div class="shop-right" :class="{'paybg':payClass}">
        <span> {{payPrice}}</span>
    </div>
</div>
<div class="ball-container">
    <div v-for="ball in balls">
        <transition name="drop"
                    @before-enter="beforeDrop"
                    @enter="dropping"
                    @after-enter="afterDrop"
        >
            <div class="ball" v-show="ball.show">
                <div class="inner inner-hook"></div>
            </div>
        </transition>
    </div>
</div>

</div>
</template>

在export default中定义小球数据
data(){

        return{
           balls: [ //生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画
                {
                    show: false //维护当前小球的状态
                },
                {
                    show: false
                },
                {
                    show: false
                },
                {
                    show: false
                },
                {
                    show: false
                }
            ],
            dropBalls: [], //dropBalls数组接收下落小球,用来存贮已经下落的小球
            fold: true //购物车详情列表默认折叠
        }
         ////触发一次事件就会将所有小球进行遍历
        drop(el) {

            //el代表点击的添加商品按钮icon-add_circle,而不是小球
            for (let i = 0; i < this.balls.length; i++) {
                let ball = this.balls[i];
                if (!ball.show) { //将false的小球放到dropBalls
                    ball.show = true;
                    ball.el = el; //设置小球的el属性为一个dom对象
                   // this.$set(ball,'el',el)
                    this.dropBalls.push(ball);
                    return;  //在所有的小球中只要找到1个ball.show = true;就可以了，不用把所有的小球都有要有设置为true
                }
            }

        },
        //下面方法beforeDrop，dropping，afterDrop都是动画方法
        beforeDrop(el) {  //这个方法的执行是因为这是一个vue的监听事件,动画enter之前
            //把使用到的小球从起始位置（购物车位置）上升到添加按钮位置
            //在这时el与上面的drop（el）不是同一个el,这里的el代表的是类为ball的div及其子元素
            let count = this.balls.length;
            //先找到所有为true的小球（连续点击的情况）
            while (count--) { //循环执行并判断
                let ball = this.balls[count];
                if (ball.show) { //下落的小球
                    //外层元素是纵向的动画，内层元素是横向的动画
                    //el.getBoundingClientRect()这个方法返回一个矩形对象，
                    // 包含四个属性：left、top、right和bottom。分别表示元素的左，上，右和下分别相对【浏览器视窗】的位置。
                    //ball.el与el不是同一个，ball.el是指点击添加按钮时的那个el
                    let rect = ball.el.getBoundingClientRect(); //获取小球的相对于视口的位移(小球高度)
                    console.log('rrr');
                    console.log(rect);
                    let x = rect.left - 32; //当前按钮和购物车中小球的left的差值
                    //window.innerHeight文档显示区域的宽高,y表示的是按钮到购物车的高度
                    let y = -(window.innerHeight - rect.top - 22); //负数,因为是从左上角往下的的方向【】
                    el.style.display = '';
                    //el的动画偏移
                    el.style.webkitTransform = `translate3d(0,${y}px,0)`;
                    el.style.transform = `translate3d(0,${y}px,0)`;
                    //处理内层动画,确定小球的起始位置
                    let inner = el.getElementsByClassName('inner-hook')[0];
                    inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
                    inner.style.transform = `translate3d(${x}px,0,0)`;
                }
            }
        },

        dropping(el, done) { //动画enter进入
            //rf是为了触发浏览器的重排
            //*添加、删除、更新DOM节点
       // *通过display: none隐藏一个DOM节点-触发重排和重绘
           // *通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
           // *移动或者给页面中的DOM节点添加动画
           // *添加一个样式表，调整样式属性
            //*用户行为，例如调整窗口大小，改变字号，或者滚动。
        //*获取某些元素的属性（我使用的方法）
             let rf = el.offsetHeight;  //触发重绘html
            this.$nextTick(() => {  //回调函数异步执行，两个动画效果就不会卡顿了
                el.style.webkitTransform = 'translate3d(0,0,0)';
                el.style.transform = 'translate3d(0,0,0)';
                let inner = el.getElementsByClassName('inner-hook')[0];
                inner.style.webkitTransform = 'translate3d(0,0,0)';
                inner.style.transform = 'translate3d(0,0,0)';
                el.addEventListener('transitionend', done);
            });

        },
        afterDrop(el) { //动画进入之后
            let ball = this.dropBalls.shift();//完成一次动画就删除一个dropBalls的小球
            if (ball) {
                ball.show = false;
                el.style.display = 'none'; //隐藏小球
            }
        },

        

样式：
.ball-container

.ball
    position: fixed
    left: 32px
    bottom: 22px
    z-index: 200
    transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
    .inner
        width: 16px
        height: 16px
        border-radius: 50%
        background: rgb(0, 160, 220)
        transition: all 0.4s linear

• 在向添加商品组件中Cartcontrol.vue中，向父组件Goods.vu组件中传递参数

---

  <!--商品加一区域，小球抛出的起始位置【是在加号的位置上】-->
    <div class="add" @click.stop.prevent="addCart">
        <i class="icon-add_circle"></i>
    </div>
    //添加购物车商品数量
        addCart(ele){
            if(!ele._constructed){
                //better-scroll的派发事件scroll的event和pc端浏览器的点击事件的event有个
                // 属性区别_constructed，pc端浏览器的点击事件的event中是没有这个属性的
                return;
            }
            //一开始food中是没有商品数量count
            if(!this.food.count){
               // this.food.count = 1;count不是food对象中的属性，直接向food添加新属性count，
                // 当count值发生变化的时候在dom渲染的时候是无法感应到count的变化
                this.$set(this.food,'count',1);
            }else{
                this.food.count++;
            }
            //向父组件Goods传参
            this.$emit('add',ele.target);
        },
        

• 父组件Goods.vu在接受到子组件的添加商品的信号后

---

                <div class="cartcontrol-wrapper">
                      <Cartcontrol :food="foodItem"
                          @add="addFood"
                      ></Cartcontrol>
                 </div>
                   <!--购物车区域-->
    <div class="foods-cart">
        <cart
                :deliveryPrice="seller.deliveryPrice"
                :minPrice="seller.minPrice"
                :selectFoods="selectFoods"
                ref="shopcart"
        ></cart>
    </div>

       addFood(target){
            this._drop(target);
        },
        _drop(target) {
            // 体验优化,异步执行下落动画
            this.$nextTick(() => {
                //target代表点击的添加商品按钮icon-add_circle
                this.$refs.shopcart.drop(target); //访问到$refs.shopcart组件中的方法drop
            });
        }