1. 程式人生 > >Vue實現購物小球拋物線

Vue實現購物小球拋物線

dev position form add 官方 false ack set this

 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>   

transtion屬性可以查看官方文檔,具體位置可以通過調試獲得。

Vue實現購物小球拋物線