fix(Transition): fixed transition completing too early when slowing down animation speed in browser dev tools #14113
Conversation
WalkthroughReplaces the Changes
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)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Suggested labels
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🔇 Additional comments (1)
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.
Example instruction:
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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) -
edison1105
changed the title
Size ReportBundles
Usages
|
2 participants
(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
Bug Fix
✏️ Tip: You can customize this high-level summary in your review settings.