Vue实现购物小球抛物线的方法实例

Posted 2020-12-21 ypha

这篇文章主要给大家介绍了Vue实现购物小球抛物线的方法实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧！

本文介绍的是利用Vue实现购物小球抛物线的相关内容，下面话不多说了，来一起看看详细的介绍吧！

css片段

 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  }

html片段

 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>

js片段

 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>