カートボール放物線にどのような空腹追加

<テンプレート>
の<divクラス= "ラッパー">
<DIV CLASS = "リスト・ラッパー">
<DIV CLASS = "アイテム">
<DIV CLASS = "左">
<IMG SRC =」../../資産/画像/ stt.jpg」ALT = "">
<a class="text-wrapper" href="javascript:;">
<スパンクラス= "報復">【精选】巧克力草莓约500グラム/份</スパン>
<スパンクラス= "DESC">鲜嫩多汁、入口即化、果肉细腻、果皮较薄</スパン>
<スパンクラス= "販売">月售1024件;好评86％</スパン>
<スパンクラス= "価格">¥39.8 </ span>を
</a>の
</ div>
<divのクラス= "右">
<divのクラス=> "追加"
<スパン：クラス= "[ 'オプトイン'、{活性：COUNT1> 0}]」V-ショー= "COUNT1> 0"> - </スパン>
<スパンクラス= "NUM" V-ショー= "COUNT1> 0"> {{COUNT1}} </スパン>
+ </ span>の<クリック= "addCount（1、$イベント）" @スパンクラス= "オプトアクティブ">
</ div>
</ div>
</ div>
<DIV CLASS = "アイテム">
<DIV CLASS = "左">
<IMG SRC = "../../資産/画像/ stt.jpg" ALT = "">
<クラス= "テキストラッパー" HREFを= "JavaScriptの：;">
<スパンクラス= "報復">四川不知火丑柑约500グラム/份</スパン>
<スパンクラス= "販売">月售1024件;好评72％</スパン>
<スパンクラス= "価格">¥6.6 </ span>を
</a>の
</ div>
<divのクラス= "右">
<divのクラス=> "追加"
<スパン：クラス= "[ 'オプトイン'、{アクティブ：COUNT2 > 0}]」V-ショー= "COUNT2> 0"> - </スパン>
<スパンクラス= "NUM" V-ショー= "COUNT2> 0"> {{COUNT2}} </スパン>
<スパンクラス= "オプトアクティブaddCount（2、$イベント） "> + </ span>に」@クリック="
</ DIV>
</ DIV>
</ DIV>
<DIV CLASS = "アイテム">
<DIV CLASS = "左">
<をIMG SRC = "../../資産/画像/ stt.jpg" ALT = "">
<a class="text-wrapper" href="javascript:;">
<スパンクラス= "報復">【鲜切】菠萝约250グラム/份</ span>の
<スパンクラス= "販売">月售1024件;好评95％</ span>の
<スパンクラス= "価格">¥9.8 </ span>を
</a>の
</ div>
<divのクラス= "右">
<DIV CLASS = "追加">
<スパン：クラス= "[ 'OPT'、{活性：COUNT3> 0}]" V-ショー= "COUNT3> 0"> - </スパン>
<スパンクラス= "NUM" V-ショー= "COUNT3> 0"> {{ COUNT3}} </ span>の
<スパンクラス= "アクティブオプトイン" @クリック= "addCount（3、$イベント）"> + </ span>を
</ div>
</ div>
</ div>
<divのクラス=」アイテム">
<DIV CLASS ="左">
<IMG SRC =" ../../資産/画像/ stt.jpg "ALT = "">
<クラス= "テキストラッパー"のhref =" javascriptの:; ">
<スパンクラス="報復">本地樱桃【精选】约250グラム/盒</ span>の
<スパンクラス= "DESC">本地樱桃刚上市、可能有稍微一丁点的酸味哦〜</ span>の
<スパンクラス= "販売">月售1024件;好评86％</ span>の
<スパンクラス= "価格">¥19.9 </ span>を
</a>の
</ div>
<divのクラス= "右">
<divのクラス=> "追加"
<スパン：[クラス= " 'オプトイン'を、{アクティブ：count4> 0}] "V-ショー= "count4> 0"> - </スパン>
<スパンクラス= "NUM" V-ショー= "count4> 0"> {{count4}} </スパン>
<スパンクラス=" addCount（4、$イベント） "> + </ span>の「クリック= @"アクティブオプト
</ DIV>
</ DIV>
</ DIV>
</ DIV>
<DIV CLASS = "フッタ">
クラス= <div要素「[」カート」、{活性：カウント> 0}] ">
<IMG SRC =" ../../資産/画像/ stt.jpg "ALT = "">
<スパンクラス= "カウント" V-ショー="カウント> 0 "> {{カウント}} </スパン>
</ div>
<DIV：クラス=" [ 'チェック'、{活性：カウント> 0}] ">
去结算
</ div>

</div>
<div class="ball-container">
  <div v-for="(ball, index) in balls" :key="index">
    <transition name="cast-ball" @before-enter="ballBeforeEnter" @enter="ballEnter" @after-enter="ballAfterEnter">
      <div class="horiz-ball" v-show="ball.show">
        <div class="ball"></div>
      </div>
    </transition>
  </div>
</div>

</ div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
データ（）{
リターン{
COUNT1：0、
COUNT2：0、
COUNT3：0、
count4：0、
ボール：[
{ショー：偽}、
{ショー：偽} 、
{ショー：偽}、
{ショー：偽}、
{ショー：偽}、
{ショー：偽}、
{ショー：偽}、
{ショー：偽}、
{ショー：偽}
]、
castBalls：[]
}
} 、
計算された：{
カウント（）{
リターンthis.count1 + this.count2 + this.count3 + this.count4
}
}、
メソッド：{
addCount（タイプ、EV）{
this.castBall（タイプ、ev.target）
}、
（タイプの、EL）castBall {
//は小さなボールの（利用可能）falseに最初のショーを見つけ、その後、ループのうち
this.balls.some（ボール=> {
IF（！ball.show）{
真=にball.show
EL = ball.elの
ball.typeタイプ=
this.castBalls.push（ボール）
に真リターン
}
}）
}、
ballBeforeEnter（EL）{
LEN = this.balls.lengthを聞かせて
I <LEN; I ++のための（I = 0せ）{
LETのthis.balls =ボール[I]
IF（ball.show）{
せRECT = ball.el.getBoundingClientRect（）

      // x的值为X轴 起始点和落落脚点的距离
      let x = rect.left - 340
      let y = rect.top - window.innerHeight + 40
      el.style.webkitTransform = `translate3d(${x}px,0,0)`
      el.style.transform = `translate3d(${x}px,0,0)`
      let child = el.children[0]
      child.style.transform = `translate3d(0,${y}px,0)`
      child.style.webkitTransform = `translate3d(0,${y}px,0)`
    }
  }
},
ballEnter(el, done) {
  el.timer = setTimeout(() => {
    el.style.webkitTransform = `translate3d(0,0,0)`
    el.style.transform = `translate3d(0,0,0)`
    let child = el.children[0]
    child.style.transform = `translate3d(0,0,0)`
    child.style.webkitTransform = `translate3d(0,0,0)`
    el.addEventListener('transitionEnd', done)
    el.addEventListener('webkitTransitionEnd', done)
  }, 30)
},
ballAfterEnter(el) {
  let ball = this.castBalls.shift()
  if (ball) {
    ball.show = false
    el.style.display = 'none'
    clearTimeout(el.timer)
    switch (ball.type) {
      case 1:
        this.count1 += 1
        break
      case 2:
        this.count2 += 1
        break
      case 3:
        this.count3 += 1
        break
      case 4:
        this.count4 += 1
        break
    }
  }
}

}
}
</ SCRIPT>
<スタイルのlang = "SCSS"スコープ>
.wrapper {
高さ：100％。
}

.LISTラッパー{
背景色：#FFF。
パディング：0 5pxの0 10pxの;
}

.item{
  display: flex;
  border-bottom: 1px solid #f4f4f4;
  padding :14px 0;
}

  .left{
    display: flex;
    flex: 1;
  }

  .text-wrapper{
   display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .tit{
    color: #333;   
  }

  .desc, .sale{
     font-size: 12px;
    color: #999;
  }

  .right{
    flex: 0 0 84px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }

    .add{
       display: flex;
      align-items: center;
      background-color: #fff;
      position: relative;
      z-index: 200;
    }

      span{
    color: #818181;
      }

      .opt, .num{
        width: 28px;
        height: 28px;
        line-height: 28px;
        text-align :center;
        font-size :20px;
        &.active{
         color: #47b34f;
        }

      .num{
        font-size: 16px;
      }

      }

.footer {
位置：固定されました。
下：0;
幅：100％;
表示：フレックス。
高さ：48px;
国境：1pxの固体＃1 d9d9d9;
}

justify-content space-between{
 z-index: 1000;
}

.cart{
 flex: 0 0 40px;
  height: 40px;
}

  background-color #bebebe{

位置：相対;
表示：フレックス。
ALIGN-アイテム：センター;
正当化-コンテンツ：センター;
マージン：5pxの10pxの;
境界半径：50％。
遷移：0.4秒立方ベジェ（0.17、0.67、0.59、1.48）。
＆.active {
背景色：＃47b34f。
フレックス：0 0は50px;
高さ：は50px;
変換：移動Y（-12px）。
}

  }

  img{

幅：25ピクセル;
}

  .count{
    position: absolute;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align :center;
    top: 0;
    right: 0;
    border-radius: 50%;
    background-color: #ff5d5c;
    color: #ffffff;
    font-size: 12px;
  }

.text{
   flex: 1;
  background-color: #fff;
  display: flex;
  align-items: center;
  color :#999;
  padding-left: 10px;
}

.check{
  flex: 0 0 115px;
  width: 115px;
  height :100%;
  display :flex;
  align-items: center;
  justify-content: center;
  background-color :#bebebe;
        function(){ //外汇返佣  http://www.fx61.com/
  color: #ffffff;
  &.active{
     background-color: #47b34f;
  }

}
   /* 这里是外层的盒子做水平运动 */

容器{-.ball
.horizボール{
位置：固定;
/ X軸ボール足場 /
左：50％;
底：20ピクセル;
Zインデックス：100;
転移：すべての線形0.4秒;
.ball {
幅：20ピクセル;
高さ：20ピクセル;
ボーダーRADIUS：50％;
背景：＃47b34f;
/ 自体はベッセルによってシミュレート運動促進ないペレット /
遷移は：全キュービックベジエを0.4秒（0.49、-0.29、0.75、0.41）。
}

}

</スタイル>

カートボール放物線にどのような空腹追加

おすすめ