Vue实现购物小球抛物线

 1 .shop{
 2      position: fixed;
 3      top: 300px;
 4      left: 40px;
 5  }
 6  .ball{
 7      position: fixed;
 8      left: 32px;
 9      bottom: 22px;
10      z-index: 200;
11      transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41); /*贝塞尔曲线*/
12  }
13  .inner{
14      width: 16px;
15      height: 16px;
16      border-radius: 50%;
17      background-color: rgb(0,160,220);
18      transition: all 0.4s linear;
19 }
20 .cart{
21     position: fixed;
22     bottom: 22px;
23     left: 32px;
24     width: 30px;
25     height: 30px;
26     background-color: rgb(0,160,220);
27     color: rgb(255,255,255);
28 }

 1 <div id="app">
 2     <ul class="shop">
 3         <li v-for="item in items">
 4             <span>{{item.text}}</span>
 5             <span>{{item.price}}</span>
 6             <button @click="additem">添加</button>
 7         </li>
 8     </ul>
 9     <div class="cart" style="">{{count}}</div>
10     <div class="ball-container"><!--小球-->
11         <div v-for="ball in balls">
12             <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
13                 <div class="ball" v-show="ball.show">
14                     <div class="inner inner-hook"></div>
15                 </div>
16             </transition>
17         </div>
18     </div>
19 </div>

 1 <script>
 2     new Vue({
 3         el:"#app",
 4         data:{
 5             count: 0,
 6             items:[
 7                 {
 8                    text: "苹果",
 9                     price: 15
10                 },
11                 {
12                     text: "香蕉",
13                     price: 15
14                 }
15             ],
16             balls: [ //小球 设为3个
17                 {
18                     show: false
19                 },
20                 {
21                     show: false
22                 },
23                  {
24                     show: false
25                 },
26             ],
27             dropBalls:[],
28         },
29         methods:{
30             additem(event){
31             this.drop(event.target);
32             this.count ++;
33             },
34             drop(el){ //抛物
35                 for(let i=0;i<this.balls.length;i++){
36                     let ball= this.balls[i];
37                     if(!ball.show){
38                         ball.show = true;
39                         ball.el=el;
40                         this.dropBalls.push(ball);
41                         return;
42                     }
43                 }
44             },
45             beforeDrop(el) {/* 购物车小球动画实现 */
46                 let count = this.balls.length;
47                 while (count--) {
48                     let ball = this.balls[count];
49                     if (ball.show) {
50                         let rect = ball.el.getBoundingClientRect(); //元素相对于视口的位置
51                         let x = rect.left - 32;
52                         let y = -(window.innerHeight - rect.top - 22);  //获取y
53                         el.style.display = ‘‘;
54                         el.style.webkitTransform = ‘translateY(‘+y+‘px)‘;  //translateY
55                         el.style.transform = ‘translateY(‘+y+‘px)‘;
56                         let inner = el.getElementsByClassName(‘inner-hook‘)[0];
57                         inner.style.webkitTransform = ‘translateX(‘+x+‘px)‘;
58                         inner.style.transform = ‘translateX(‘+x+‘px)‘;
59                     }
60                 }
61             },
62             dropping(el, done) { /*重置小球数量  样式重置*/
63                 let rf = el.offsetHeight;
64                 el.style.webkitTransform = ‘translate3d(0,0,0)‘;
65                 el.style.transform = ‘translate3d(0,0,0)‘;
66                 let inner = el.getElementsByClassName(‘inner-hook‘)[0];
67                 inner.style.webkitTransform = ‘translate3d(0,0,0)‘;
68                 inner.style.transform = ‘translate3d(0,0,0)‘;
69                 el.addEventListener(‘transitionend‘, done);
70             },
71             afterDrop(el) { /*初始化小球*/
72                 let ball = this.dropBalls.shift();
73                 if (ball) {
74                 ball.show=false;
75                 el.style.display = ‘none‘;
76             }
77         }
78     }
79 })
80 </script>