消息关闭
    暂无新消息!

全部代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my Vue project</title>
    <script src="vue/vue.js"></script>
    <style type="text/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);
        }
    </style>

</head>
<body>
    <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>
</body>
</html>

可是有这样一个报错:

这是什么原因?还有是不是因为我的css样式写错了?


3个回答

︿ 0

我运行你的代码,没有报错,说明这段代码写的没有问题,你在找找其它的原因