fix(core): resolve transition Bugbot findings on #1582

Read the current element when open animations settle so lazy-mounted
popups pick up setElement during the render cycle, and defer
scheduleTransitionSettle to the menu viewport PR where it is used.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: sampotts

packages/core/src/dom/ui/tests/transition.test.ts

@@ -53,6 +53,31 @@ describe('createTransition', () => {
 
       expect(handler.state.current.transitioning).toBe(false);
     });
+
+    it('waits for animations on an element registered after open', async () => {
+      const handler = createTransition();
+      let resolveAnimation!: () => void;
+      const animation = new Promise<void>((resolve) => {
+        resolveAnimation = resolve;
+      });
+
+      const promise = handler.open();
+
+      const el = document.createElement('div');
+      el.getAnimations = vi.fn(() => [{ finished: animation } as unknown as Animation]);
+      handler.setElement(el);
+
+      await vi.waitFor(() => {
+        expect(handler.state.current.status).toBe('idle');
+      });
+
+      expect(handler.state.current.transitioning).toBe(true);
+
+      resolveAnimation();
+      await promise;
+
+      expect(handler.state.current.transitioning).toBe(false);
+    });
   });
 
   describe('close', () => {

packages/core/src/dom/ui/transition.ts

@@ -1,5 +1,5 @@
 import { createState, type State } from '@videojs/store';
-import { afterDoubleAnimationFrame, getMaxCSSTransitionTime } from '@videojs/utils/dom';
+import { getMaxCSSTransitionTime } from '@videojs/utils/dom';
 import { noop } from '@videojs/utils/function';
 import type { TransitionState } from '../../core/ui/transition';
 
@@ -16,57 +16,6 @@ export interface WaitForAnimationsOptions {
   includeCSSTransitions?: boolean;
 }
 
-export interface ScheduleTransitionSettleOptions {
-  includeCSSTransitions?: boolean;
-  isVisuallyComplete?: (element: HTMLElement) => boolean;
-}
-
-/** After double-RAF, optionally poll visual completion, then wait for animations to settle. */
-export function scheduleTransitionSettle(
-  element: HTMLElement,
-  isCurrent: () => boolean,
-  onSettled: () => void,
-  options: ScheduleTransitionSettleOptions = {}
-): () => void {
-  let pollRaf = 0;
-  let settled = false;
-
-  function settle(): void {
-    if (settled || !isCurrent()) return;
-    settled = true;
-    cancelAnimationFrame(pollRaf);
-    pollRaf = 0;
-    onSettled();
-  }
-
-  function pollVisualComplete(): void {
-    pollRaf = 0;
-    if (settled || !isCurrent()) return;
-
-    if (options.isVisuallyComplete?.(element)) {
-      settle();
-      return;
-    }
-
-    pollRaf = requestAnimationFrame(pollVisualComplete);
-  }
-
-  afterDoubleAnimationFrame(isCurrent, () => {
-    pollVisualComplete();
-
-    waitForAnimations(element, {
-      includeCSSTransitions: options.includeCSSTransitions ?? false,
-    }).then(() => {
-      settle();
-    });
-  });
-
-  return () => {
-    settled = true;
-    cancelAnimationFrame(pollRaf);
-  };
-}
-
 /**
  * Manages open/close transition lifecycle via `createState`.
  *
@@ -109,8 +58,6 @@ export function createTransition(): TransitionApi {
       element = el;
     }
 
-    const animationTarget = element;
-
     state.patch({ active: true, status: 'starting', transitioning: true });
 
     return new Promise<void>((resolve) => {
@@ -120,7 +67,7 @@ export function createTransition(): TransitionApi {
           rafId2 = 0;
           if (destroyed || currentTransitionId !== transitionId || !state.current.active) return resolve();
           state.patch({ status: 'idle' });
-          waitForAnimations(animationTarget).finally(() => {
+          waitForAnimations(element).finally(() => {
             if (destroyed || currentTransitionId !== transitionId || !state.current.active) return resolve();
             state.patch({ transitioning: false });
             resolve();