let y = -(window.innerHeight - rect.top - 22) // 负数，因为是从左上角向下
el.style.display = ''
el.style.webkitTransform = `translate3d(0,${y}px,0)` // 设置外层盒子，即小球垂直方向的位移
el.style.transform = `translate3d(0,${y}px,0)`
let inner = el.getElementsByClassName('inner-hook')[0] inner.style.webkitTransform = `translate3d(${x}px,0,0)` // 设置内层盒子，即小球水平方向的距离
inner.style.transform = `translate3d(${x}px,0,0)`
}
}
},
// enter
handleEnter: function (el, done) {
/* eslint-disable no-unused-vars */
// 触发浏览器重绘
let rf = el.offsetHeight
this.$nextTick(() => { // 让动画效果异步执行,提高性能
el.style.webkitTransform = 'translate3d(0, 0, 0)'// 设置小球掉落后最终的位置
el.style.transform = 'translate3d(0, 0, 0)'
let inner = el.getElementsByClassName('inner-hook')[0] inner.style.webkitTransform = 'translate3d(0, 0, 0)'
inner.style.transform = 'translate3d(0, 0, 0)'
el.addEventListener('transitionend', done) // Vue为了知道过渡的完成，必须设置相应的事件监听器。它可以是transitionend或 animationend
})
},
handleAfterEnter: function (el) {
let ball = this.dropBalls.shift() // 完成一次动画就删除一个dropBalls的小球
if (ball) {
ball.show = false
el.style.display = 'none'
}
},
希望本文所述对大家vue.js程序设计有所帮助。
