Что голодным Добавить в корзину мяч параболической

<шаблон>
<DIV класс = "обертка">
<DIV класс = "список-обертка">
<DIV класс = "пункт">
<DIV класс = "левой">
<IMG SRC =»../../ активы / изображения / stt.jpg»альт = "">
<a class="text-wrapper" href="javascript:;">
<пролет класс = "синица"> 【】精选巧克力草莓约500г /份</ SPAN>
<промежуток класс = "убывание">鲜嫩多汁,入口即化,果肉细腻,果皮较薄</ SPAN>
<пролет класс = "продажа">月售1024件;好评86% </ SPAN>
<пролет класс = "цена"> ¥ 39,8 </ SPAN>
</a>
</ DIV>
<DIV класс = "вправо">
<DIV класс = "добавить">
<SPAN: класс = "[ 'неавтоматического',{активна: count1> 0}]»V-шоу = "count1> 0"> - </ SPAN>
<пролет класс = "номер" V-шоу = "count1> 0"> {{count1}} </ SPAN>
<диапазон класс = "неавтоматического активный" @ нажмите = "addCount (1, $ событие)"> + </ SPAN>
</ DIV>
</ DIV>
</ DIV>
<DIV класс = "пункт">
<DIV класс = "левой">
<IMG SRC = "../../ активы / изображения / stt.jpg" альт = "">
<класс = "текст-обертка" HREF = "JavaScript:;">
<промежуток класс = "зуб">四川不知火丑柑约500г /份</ SPAN>
<пролет класс = "продажа">月售1024件;好评72% </ SPAN>
<SPAN класс = "цена"> ¥ 6,6 </ SPAN>
</a>
</ DIV>
<DIV класс = "вправо">
<DIV класс = "добавить">
<SPAN: класс = "[ 'неавтоматического', {активна: count2 > 0}]»V-шоу = "count2> 0"> - </ SPAN>
<класс диапазон = "пит" V-шоу = "count2> 0"> {{count2}} </ SPAN>
<пролет класс = "неавтоматического активный»@ нажмите = "addCount (2, $ событие)"> + </ SPAN>
</ DIV>
</ DIV>
</ DIV>
<DIV класс = "пункт">
<DIV класс = "левой">
< IMG SRC = "../../ активы / изображения / stt.jpg" альт = "">
<a class="text-wrapper" href="javascript:;">
<пролет класс = "синица"> 【鲜切】菠萝约250г /份</ SPAN>
<SPAN класс = "продажа">月售1024件;好评95% </ SPAN>
<SPAN класс = "цена"> ¥ 9,8 </ SPAN>
</a>
</ DIV>
<DIV класс = "вправо">
<DIV класс = "добавить">
<SPAN: класс = "[ 'неавтоматического', {активна: count3> 0}]" V-шоу = "count3> 0"> - </ SPAN>
<пролет класс = "номер" V-шоу = "count3> 0"> {{ count3}} </ SPAN>
<SPAN класс = "неавтоматического активный" @ нажмите = "addCount (3, $ событие)"> + </ SPAN>
</ DIV>
</ DIV>
</ DIV>
<DIV класс =»пункт ">
<DIV класс =" левой ">
<IMG SRC =" ../../ активы / изображения / stt.jpg "альт = "">
<класс = "текст-обертка" HREF =" JavaScript :; ">
<промежуток класс =" зуб ">本地樱桃【】精选约250г /盒</ SPAN>
<промежуток класс = "убывание">本地樱桃刚上市,可能有稍微一丁点的酸味哦~ </ SPAN>
<пролет класс = "продажа">月售тысячу двадцать-четыре件;好评86% </ SPAN>
<пролет класс = "цена"> ¥ 19,9 </ SPAN>
</a>
</ DIV>
<DIV класс = "вправо">
<DIV класс = "добавить">
<SPAN: класс = "[ 'неавтоматического', {активна: count4> 0}] "V-шоу = "count4> 0"> - </ SPAN>
<класс диапазон = "пит" V-шоу = "count4> 0"> {{count4}} </ SPAN>
<пролет класс =" неавтоматического активный»@ нажмите = "addCount (4, $ событие)"> + </ SPAN>
</ div>
</ div>
</ div>
</ div>
<DIV класс = "колонтитул">
<DIV: класс = «[»телега», {активен: число> 0}] ">
<IMG SRC =" ../../ активы / изображения / stt.jpg "альт = "">
<SPAN класс = "считать" V-шоу =" Количество > 0 "> {{счетчик}} </ SPAN>
</ 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: []
}
} ,
вычислено: {
COUNT () {
возвращение this.count1 + this.count2 + this.count3 + this.count4
}
},
методы: {
addCount (тип, эв) {
this.castBall (тип, ev.target)
},
castBall (типа, EL) {
// найти первое шоу в ЛОЖЬ (есть) маленький шарик, а затем из петли
this.balls.some (шарик => {
IF (! ball.show) {
ball.show истинным =
EL = ball.el
ball.type тип =
this.castBalls.push (Ball)
возвращение к истинным
}
})
},
ballBeforeEnter (EL) {
Выпускаемое Len = this.balls.length
для (Выпускаемое I = 0; I <Len; I ++ ) {
Выпускаемое this.balls = Болл [I] ,
ЕСЛИ (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>
<стиль Ланг = "СКС" Scoped>
.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 твердых # 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;
Flex: 0 0 50px;
высота: 50px;
преобразование: translateY (-12px);
}

  }

  img{

ширина: 25px;
}

  .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%;
внизу: 20px;
Z-индекс: 100;
Переход: все линейные 0.4 сек;
.ball {
ширина: 20px ;
высота: 20px;
границы RADIUS: 50%;
фон: # 47b34f;
/ гранулы сами по себе ускоренному движению имитируется Бессель /
Переход: 0.4 сек All-Cubic Безье (0,49, -0,29, 0,75, 0,41);
}

}

}

</ Стиль>