fix(QTabPanels): tab-panels 'transition' emit fires before transition…

… ends (fix #17479). (#17489)

ui/src/composables/private.use-panel/use-panel.js

@@ -3,6 +3,7 @@ import { h, ref, computed, watch, nextTick, getCurrentInstance, Transition, Keep
 import TouchSwipe from '../../directives/touch-swipe/TouchSwipe.js'
 
 import useRenderCache from '../../composables/use-render-cache/use-render-cache.js'
+import useTimeout from '../../composables/use-timeout/use-timeout.js'
 
 import { hSlot } from '../../utils/private.render/render.js'
 import { getNormalizedVNodes } from '../../utils/private.vm/vm.js'
@@ -49,6 +50,7 @@ export const usePanelEmits = [ 'update:modelValue', 'beforeTransition', 'transit
 export default function () {
   const { props, emit, proxy } = getCurrentInstance()
   const { getCache } = useRenderCache()
+  const { registerTimeout } = useTimeout()
 
   let panels, forcedPanelTransition
 
@@ -117,11 +119,9 @@ export default function () {
     if (panelIndex.value !== index) {
       panelIndex.value = index
       emit('beforeTransition', newVal, oldVal)
-      setTimeout(() => {
-        nextTick(() => {
-          emit('transition', newVal, oldVal)
-        })
-      }, props.transitionDuration);
+      registerTimeout(() => {
+        emit('transition', newVal, oldVal)
+      }, props.transitionDuration)
     }
   })