yelgogogo
commented
7 years ago 自己研究了2天，发现vue在渲染第一次动画的时候有问题，奇葩的是，如果打开vue dev tool 这个问题就又消失了，百思不得其解。 后来想到了一个简单粗暴的解决方案，每个点击动画，做2次。。。就算第一次现实不正常，第2次也能显示出来……
改动如下 在data() 中将ball上限改为10个 balls: [{show: false}, {show: false}, {show: false}, {show: false}, {show: false}, {show: false}, {show: false}, {show: false}, {show: false}, {show: false}]
在drop中每次点击，压入2个小球 drop (el) { for (let i = 0; i < this.balls.length; i++) { if (!this.balls[i].show) { this.balls[i].show = true this.balls[i + 1].el = el this.balls[i + 1].show = true this.balls[i].el = el this.dropBalls.push(this.balls[i]) this.dropBalls.push(this.balls[i + 1]) return } } },
在 afterEnter 中弹出2个小球。。。
afterEnter (el) { let ball = this.dropBalls.shift() if (ball) { ball.show = false el.style.display = 'none' } ball = this.dropBalls.shift() if (ball) { ball.show = false el.style.display = 'none' } }
如题，第一次点击时候不出动画，只有连点2次才出现，目前还没发现问题在哪。。。