-
-
Notifications
You must be signed in to change notification settings - Fork 4.5k
fix: properly delay intro transitions #12389
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
Conversation
WAAPI applies the styles of a delayed animation only when that animation starts. In the case of fade-in transitions that means the element is visible, then goes invisible and fades in. Fix that by never applying a delay on intro transitions, instead add keyframes of the initial state for the duration of the delay. Fixes #10876
🦋 Changeset detectedLatest commit: 9225ed4 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
What about outro transitions? If it starts hidden in the outro, then fades in then out again, does that work correctly with delay? |
That's different because the delay says "the animation starts after X miliseconds", and so I would expect the invisible->visible->invisible transition to start only after the given delay. For intro transitions it makes sense to apply the initial value directly because the transitions all start from an invisible state and then go to a visible one. |
…nality for that in animation-helpers
oops i approved but there's a lint error, looking |
WAAPI applies the styles of a delayed animation only when that animation starts. In the case of fade-in transitions that means the element is visible, then goes invisible and fades in. Fix that by never applying a delay on intro transitions, instead add keyframes of the initial state for the duration of the delay.
Fixes #10876
This works, but the test is failing - I can't figure out how to properly write one. For some reason the
opacity
that thefade
transition calculates is 0, whereas it should be 1 (and in fact is, when testing this in the playground). Update: got it working by applying the style manually, but feels like a hack and it doesn't work for the outro transition, still no idea why this happensBefore submitting the PR, please make sure you do the following
feat:
,fix:
,chore:
, ordocs:
.Tests and linting
pnpm test
and lint the project withpnpm lint