章節連結
Vue 3 利用 <Transition> 實現動態高度的收摺動畫，並撰寫一個 composable 來幫助重複使用。
內容
由於 Vue 的 <Transition> 有提供 JS 的 Hook 來觸發 callback，這回透過 before-enter, enter 和 leave 三個 hook 傳入對應 callback。
before-enter
將 HTML 元素的高度設為 0，overflow 為 hidden
enter
將 HTML 元素的高度設為 scrollHeight。同時在指定的秒數後，將 HTML 元素的高度設為 fit-content，另外 overflow 設置為空
leave
執行 enter 函式的反向操作。利用 htmlElement.offsetHeight 觸發重繪
