本文介紹的是利用Vue實現購物小球拋物線的相關內容，下面話不多說了，來一起看看詳細的介紹吧

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,220);
  color: rgb(255,255,255);
 }

html片段

<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>

js片段

<script>
  new Vue({
   el:"#app",data:{
    count: 0,items:[
     {
      text: "蘋果",price: 15
     },{
      text: "香蕉",price: 15
     }
    ],balls: [ //小球 設為3個
     {
      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)';
     el.style.transform = 'translate3d(0,0)';
     let inner = el.getElementsByClassName('inner-hook')[0];
     inner.style.webkitTransform = 'translate3d(0,0)';
     inner.style.transform = 'translate3d(0,0)';
     el.addEventListener('transitionend',done);
   },afterDrop(el) { /*初始化小球*/
     let ball = this.dropBalls.shift();
     if (ball) {
     ball.show=false;
     el.style.display = 'none';
    }
   }
  }
 })
 </script> 

transtion屬性可以檢視官方文件，具體位置可以通過除錯獲得。

到此這篇關於Vue實現購物小球拋物線的文章就介紹到這了,更多相關Vue購物小球拋物線內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！