Vue實現購物小球拋物線
阿新 • • 發佈:2017-06-01
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實現購物小球拋物線