小球飞入动画初始Y轴位移间歇性失效BUG

Question

老师您好，这个问题困扰我非常久的时间了，一直无法解决，所以向您求助下。按照您的小球飞入代码，加入了我的项目，但是出现bug：前几个小球飞入正常，后面小球基本都是初始Y轴位移失效，但也偶有个别正常的。通过console.log查看，每次给小球beforeDrop的translation3d值都是正确的。
为了消除其他影响，我单独把小球飞入做成一个demo，bug依旧。
所以拜托您分析下到底是哪里问题。万分感激！！！
(为节省您的宝贵时间，demo代码已尽量精简)
src/App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

src/views/Home.vue

<template>
  <div class="home">
    <CartControl @dropBall="dropBall"></CartControl>
    <Cart ref="cart"></Cart>
  </div>
</template>

<script>
  import Cart from '../components/Cart/Cart'
  import CartControl from '../components/CartControl/CartControl'
  export default {
    name: 'home',
    components: {
      Cart,
      CartControl
    },
    methods: {
      dropBall: function (target) {
        this.$refs.cart.drop(target)
      }
    }
  }
</script>

src/components/CartControl/CartControl.vue

<template>
    <div class="M-CartControl" @click.stop="add"></div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'CartControl',
        methods: {
            add(event) {
                this.$emit('dropBall', event.target)
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .M-CartControl
        margin: 30px 0 0 30px
        width: 30px
        height: 30px
        background: #f00
</style>

src/components/Cart/Cart.vue

<template>
  <div class="Cart" ref="cart">
    <div class="ball-container">
      <div v-for="(ball,index) in balls" :key="index">
        <transition
          @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>
    <span>购物车</span>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'Cart',
    data () {
      return {
        balls: [
          {
            show: false
          },
          {
            show: false
          },
          {
            show: false
          },
          {
            show: false
          },
          {
            show: false
          }
        ],
        dropBalls: []
      }
    },
    methods: {
      drop (el) {
        for (let i = 0; i < this.balls.length; i++) {
          const ball = this.balls[i]
          if (!ball.show) {
            ball.show = true
            ball.el = el
            this.dropBalls.push(ball)
            return
          }
        }
      },
      beforeDrop (el) {
        const ball = this.dropBalls[this.dropBalls.length - 1]
        const rect = ball.el.getBoundingClientRect()
        const cartRect = this.$refs.cart.getBoundingClientRect()
        const x = -(cartRect.left - rect.left)
        const y = -(cartRect.top - rect.top)
        el.style.display = ''
        el.style.transform = el.style.webkitTransform = `translate3d(0,${y}px,0)`
        const inner = el.getElementsByClassName('inner-hook')[0]
        inner.style.transform = inner.style.webkitTransform = `translate3d(${x}px,0,0)`
      },
      dropping (el, done) {
        this._reflow = document.body.offsetHeight
        el.style.transform = el.style.webkitTransform = `translate3d(0,0,0)`
        const inner = el.getElementsByClassName('inner-hook')[0]
        inner.style.transform = inner.style.webkitTransform = `translate3d(0,0,0)`
        el.addEventListener('transitionend', done)
      },
      afterDrop (el) {
        const ball = this.dropBalls.shift()
        if (ball) {
          ball.show = false
          el.style.display = 'none'
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .Cart
    position: fixed
    right: 50px
    bottom: 50px
    width: 50px
    height: 50px
    line-height: 50px
    color: #fff
    text-align: center
    background: aqua
    border-radius: 50%
    .ball-container
      .ball
        position: absolute
        z-index: 200
        transition: all 0.5s cubic-bezier(0.49, -0.29, 0.75, 0.41)
        .inner
          width: 16px
          height: 16px
          border-radius: 50%
          background: blue
          transition: all 0.5s linear

</style>

Answer 1

ustbhuangyi 2019-07-07 10:17:52

你把代码传到 GitHub 上我来看看吧

• 提问者 月绒兔子 #1

  【https://github.com/Yuezi32/ball-test】
  demo已传github，非常感谢老师指点！！！

• ustbhuangyi 回复 提问者 月绒兔子 #2

  给你提了 pr，https://github.com/Yuezi32/ball-test/pull/1

• 提问者 月绒兔子 回复 ustbhuangyi #3

  超级感谢老师指点！！！！

Answer 2

qq_慕姐8203528 2019-08-09 21:39:32

代码都写错了，beforeDrop方法第三行，第五个单词，自己看看