-
-
Notifications
You must be signed in to change notification settings - Fork 9k
fix(Transition): fixed transition completing too early when slowing down animation speed in browser dev tools #14113
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
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
Events-->>whenTE: end events fire (maybe)
rect rgb(240,248,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
whenTE->>App: end() (from events or RAF)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related issues
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)
🚧 Files skipped from review as they are similar to previous changes (1)
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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) -
Size ReportBundles
Usages
|
(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