fix(Transition): fixed transition completing too early when slowing down animation speed in browser dev tools

[AchoDev]

(transition):

Like the title said, when you open your dev tools and navigate to the "animation" tab, you can slow down all animations globally. This is very useful for testing animations with a very fine lense, when something just looks off to the naked eye. Anyway, this doesn't work when the component leaves, because it will be removed from the DOM too early. This pull request fixes that.

See it for yourself:
https://play.vuejs.org/#eNp9VM1u00AQfpWpUVWQEicFejFuRUE9wAEQVOLiy8Ye29tsvKvdsZOoyrszu+u4Kaqa5LDz9803f3lMbo1Jhx6TLMldaaUhcEi9uSk6uTHaEjyCxRoOUFu9gQt2vSg6/y115whIN41CuPZOb2uhHL7zxnwRwRiGBcKNUYIwSAB5e3lzy/CCpO5g1Tf5gjWjzWcG/vxtsYO97sFYdA6oRfYk4oAiiUmLBFao9HYGAlZ6B1upFMRgYQwKyxpq2UhWdE6GZFVvY1ZdA+5ESWoPV8vlxqVw30oHW23XDoQDSRHJtbpX1cznBlkHQtowswoHrl0rdu4q6MQgGy6QVYFpkYhjfcySxGqkxa6OGUOltx0Ipju5cYUa3l+dg7ZwuTyf+UwX7OCQQX3tSpfriFJJF+vzMRr4ofZp6N3CNy+8xlZ9LpUs19fHjvGYzo69G9s8iiE6Bk0Q9oZVNvidCEG8nzo6wuSVHGCYy3rKxXXLiqWpwjkJ2yBNmTm37zj/Tic0wi0YL2ZePMuVL57tUu5or/zzzf9p4NFHGx0jMxArp1VP+MmrFdaUwdLsgrQS5bqxuu+qDIxQOEitkCxWwbqVFbUZz+To3qJsWg5/0vBAmNI+g8bKGMRiiXPJXF0GJXaElvUHTzkd5kGe8/LJAWdBo1AMOGoi86eOMNH0yvGYnSf/HMPf5CkC71CI1kaUkpjR8qTeQBjO4lmLjo5ofKtjF5NZQo7vupZN+uB0x38KAa5ISr0xUqH9acKyFkkWE3kb77Hefg86sr2vKOrLFsv1C/oHt/O6IvnFl4124FWZbMcd8ea7Pz9wx+/JuNFV7xfrFeNvDGMOd+fdvvBUmfaJX2D7LfRAds29u9sRcqfHojxR73kI/kXCf3dfXyn9ie6H9GOI454mh3/Y1M2n

Summary by CodeRabbit

• Refactor

  • Transition timing now uses an animation-frame driven fallback mechanism instead of a single timer, improving precision.

• Bug Fix

  • Resolves intermittent transition hangs or premature endings so UI animations complete more reliably and feel smoother.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Replaces the setTimeout fallback in whenTransitionEnds with an unconditional requestAnimationFrame-driven polling loop (fallbackTimeout) that checks elapsed time and invokes end() when timeout + 1 is exceeded; also cancels the RAF fallback when end() runs.

Changes

Cohort / File(s)	Summary
Transition timing fallback refactor packages/runtime-dom/src/components/Transition.ts	Removed the setTimeout fallback and added an unconditional fallbackTimeout implemented as a requestAnimationFrame loop that polls elapsed time and calls end() when timeout + 1 is exceeded; end() now cancels the RAF fallback.

Sequence Diagram(s)

sequenceDiagram autonumber participant App as Application participant whenTE as whenTransitionEnds participant Events as transition/animation events participant RAF as requestAnimationFrame loop App->>whenTE: whenTransitionEnds(el, timeout) whenTE->>Events: attach end event listeners rect rgb(245,250,255) Note over whenTE,RAF: New flow — RAF polling fallback whenTE->>RAF: start fallbackTimeout (rAF loop) loop per frame RAF->>RAF: check elapsed >= timeout + 1 ? alt timeout reached RAF-->>whenTE: call end() RAF-->>whenTE: stop loop else continue RAF->>RAF: request next rAF end end end Events-->>whenTE: end events fire (maybe) whenTE->>App: end() (from events or RAF) 

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Small, localized change in a single file replacing one timing mechanism.
• Pay attention to:
  • Proper cancellation of the RAF loop to avoid leaks.
  • Parity of timing behavior (uses timeout + 1) compared to previous setTimeout.
  • Correct handling/counting of multiple transitioned properties and event listeners.

Suggested labels

scope: transition, :hammer: p3-minor-bug

Poem

🐰 I swapped the tick for frames that play,
I watch each beat, I gently sway,
No sudden jump — a steady glide,
Frame by frame I guard the tide,
Hopping through transitions, bright as day.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main fix: resolving an issue where transitions complete prematurely when animation speed is slowed in browser dev tools.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 600eb01 and f685c47.

📒 Files selected for processing (1)

• packages/runtime-dom/src/components/Transition.ts (1 hunks)

🔇 Additional comments (1)

packages/runtime-dom/src/components/Transition.ts (1)

374-374: Correctly cancels the fallback, but race condition may still allow loop continuation.

The cancelFeedback() call is correctly placed to cancel the RAF loop when the transition ends. However, due to the asynchronous nature of RAF callbacks, if a callback is currently executing when cancelFeedback() is called, that callback may still schedule another RAF at line 403 after the cancellation. See the next comment for details on the race condition.

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/runtime-dom/src/components/Transition.ts (1)

381-385: Remove commented-out code.

The old setTimeout-based implementation is preserved in git history and doesn't need to remain as comments.

Apply this diff:

- // setTimeout(() =>{- // if (ended < propCount){- // end()- // }- // }, timeout + 1)-

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3942dbe and 94afbc8.

📒 Files selected for processing (1)

• packages/runtime-dom/src/components/Transition.ts (1 hunks)

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	103 kB (+135 B)	38.9 kB (+52 B)	35.1 kB (+29 B)
vue.global.prod.js	161 kB (+135 B)	58.9 kB (+44 B)	52.5 kB (+100 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.9 kB	18.3 kB	16.8 kB
createApp	55 kB	21.4 kB	19.6 kB
createSSRApp	59.3 kB	23.1 kB	21.1 kB
defineCustomElement	60.6 kB	23.1 kB	21.1 kB
overall	69.5 kB (+135 B)	26.7 kB (+52 B)	24.3 kB (-3 B)