vue3 transaction 问题记录

在vue3 中使用transaction 中使用纯js钩子函数定义过度样式

static drop(event: Event) {
  ShopCartService.ball.value.crrentTarget = event.currentTarget!
  ShopCartService.ball.value.showHidden = true
}
static beforeBall(el: Element) {
  document.body.scrollHeight
  const curEl = <HTMLBodyElement>el
  const addBtn = <HTMLBodyElement>ShopCartService.ball.value.crrentTarget
  const addBtnRect = addBtn.getBoundingClientRect()
  const x = addBtnRect.left - 35
  const y = -(window.innerHeight - addBtnRect.top - 22)
  const inner = curEl.getElementsByClassName('inner')[0] as HTMLBodyElement
  curEl.style.transform = `translate3d(0, ${y}px, 0)`
  inner.style.transform = `translate3d(${x}px, 0, 0)`
}
static balling(el: Element, done: (...args: any) => any) {
  document.body.scrollHeight // 重绘 dom nextTick
  const curEl = <HTMLBodyElement>el
  const inner = curEl.getElementsByClassName('inner')[0] as HTMLBodyElement
  curEl.style.transform = 'translate3d(0, 0, 0)'
  inner.style.transform = 'translate3d(0, 0, 0)'
  done()
}

在Vue 3中，如果要使用JavaScript钩子函数来定义过渡样式，需要确保在适当的时机触发重绘，以确保样式的更新能够正确应用。

重绘是指浏览器重新绘制元素的过程，它可以确保更新后的样式能够正确应用到元素上。在Vue 3中，可以通过nextTick函数来触发下一次重绘。在钩子函数中使用nextTick可以确保在元素样式更新后再执行其他操作。

在代码中，通过调用document.body.scrollHeight来触发重绘，是一种常见的触发重绘的方式。scrollHeight属性表示元素内容的高度，当它被访问时，浏览器会触发重绘以确保元素的样式正确应用。

在beforeBall和balling钩子函数中使用document.body.scrollHeight的目的是为了确保在设置元素样式后，立即触发重绘。这样可以避免可能出现的样式更新延迟问题，确保过渡效果的顺利进行。

总结起来，触发重绘是为了确保更新后的样式能够正确应用到元素上，以便实现预期的过渡效果。在Vue 3中，通常可以使用nextTick函数或访问一些触发重绘的属性（如scrollHeight）来实现这一目的。