我使用的是height-transition，它不能從height: auto CSS設置轉換，所以我必須在我的vue組件中使用javascript來提取DOM元素的scrollHeight，并將其用作轉換目標高度。

這個DOM元素有高度轉換:

<div
  class="transition-all duration-300 overflow-hidden"
  :style="{ height: open ? state.height : '0' }"
  ref="tab">
  ...

到目前為止，唯一有效的是setTimeout函數，盡管它不是一個非常簡潔的方法:

setTimeout(() => {
  // workaround to initiate correct tab height for transition to work
  state.height = `${tab.value.scrollHeight}px`
}, 1000)

這是因為正確的高度是在組件掛載和渲染過程中開始的，所以用戶不會注意到選項卡只有在1000毫秒后才能正確渲染。

盡管如此，我還是想知道是否有比這更健壯的方法。我試過了:

onMounted(async () => {
  await nextTick()
  state.height = `${tab.value.scrollHeight}px`
})

或者

watch(
  () => tab.value.scrollHeight,
  async () => {
    await nextTick()
    state.height = `${tab.value.scrollHeight}px`
  }
)

或者

watch(
  () => tab.value,
  async () => {
    await nextTick()
    state.height = `${tab.value.scrollHeight}px`
  },
  { deep: true }
)

沒有一個將正確的初始值設置為state.height。只有超時似乎有所幫助。