Vue实现购物小球抛物线

.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);
}

<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>

<script>
    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 = el.getElementsByClassName('inner-hook')[0];
                        inner.style.webkitTransform = 'translateX('+x+'px)';
                        inner.style.transform = 'translateX('+x+'px)';
                    }
                }
            },
            dropping(el, done) { /*重置小球数量  样式重置*/
                let rf = el.offsetHeight;
                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();
                if (ball) {
                ball.show=false;
                el.style.display = 'none';
            }
        }
    }
})
</script>

transtion属性可以查看官方文档，具体位置可以通过调试获得。

原文链接：https://www.cnblogs.com/xueweijie/p/6929142.html