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
        }
        

樣式：
.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組件中傳遞參數