JSFiddle - React, Tailwind, and code Playground

by zhouyulong

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
        <ul class="shop">
            <li v-for="item in items">
                <span>{{item.text}}</span>
                <span>{{item.price}}</span>
                <button @click="additem">添加</button>
            </li>
        </ul>
        <div class="cart" style="">{{count}}</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>

CSS

.shop{
             position: fixed;
             top: 300px;
             left: 40px;
         }
         .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-color: rgb(0,160,220);
             transition: all 0.4s linear;
        }
        .cart{
            position: fixed;
            bottom: 22px;
            left: 32px;
            width: 30px;
            height: 30px;
            background-color: rgb(0,160,220);
            color: rgb(255,255,255);
        }

JavaScript

var app = new Vue({
            el:"#app",
            data:{
                count: 0,
                items:[
                    {
                       text: "苹果",
                        price: 15
                    },
                    {
                        text: "香蕉",
                        price: 15
                    }
                ],
                balls: [ //小球 设为3个
                    {
                        show: false
                    },
                    {
                        show: false
                    },
                     {
                        show: false
                    },
                ],
                dropBalls:[],
            },
            methods:{
                additem(event){
                this.drop(event.target);
                this.count ++;
                },
                drop(el){ //抛物
                    for(let i=0;i<this.balls.length;i++){
                        let ball= this.balls[i];
                        if(!ball.show){
                            ball.show = true;
                            ball.el=el;
                            this.dropBalls.push(ball);
                            return;
                        }
                    }
                },
                beforeDrop(el) {/* 购物车小球动画实现 */
                    let count = this.balls.length;
                    while (count--) {
                        let ball = this.balls[count];
                        if (ball.show) {
                            let rect = ball.el.getBoundingClientRect(); //元素相对于视口的位置
                            let x = rect.left - 32;
                            let y = -(window.innerHeight - rect.top - 22);  //获取y
                            el.style.display = '';
                            el.style.webkitTransform = 'translateY('+y+'px)';  //translateY
                            el.style.transform = 'translateY('+y+'px)';
                            let inner =...