refactor(staggered-fade-and-slide): use Vue native staggered transition #1578
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
victorcg88
changed the title
victorcg88
force-pushed
the
refactor/native-staggered-fade-and-slide
branch
from
bba940d
to
1628cf6
Compare
victorcg88
force-pushed
the
refactor/native-staggered-fade-and-slide
branch
2 times, most recently
from
2af30e6
to
efc42f5
Compare
victorcg88
force-pushed
the
refactor/native-staggered-fade-and-slide
branch
from
30adf70
to
bfc4ed5
Compare
…ieve in animation to animate reliably
victorcg88
force-pushed
the
refactor/native-staggered-fade-and-slide
branch
from
ffbdb1e
to
ef9d1ce
Compare
diegopf
reviewed
Aug 16, 2024
Comment on lines
+3
to
+4
| @enter="onEnter" | ||
| @afterEnter="onAfterEnter" |
There was a problem hiding this comment.
I see webstorm complaining about the event handler types. I think there's no other way but to type the argument as Element and then do a type assertion for HTMElement. https://vuejs.org/guide/typescript/composition-api#typing-event-handlers
| /** | ||
| * The name of the animation. | ||
| * Finds the index of the element in the parent children subset of new elements entering the DOM. | ||
| * This is achived by filtering out the elements that are already animated, |
There was a problem hiding this comment.
Suggested change
| * This is achived by filtering out the elements that are already animated, | |
| * This is achieved by filtering out the elements that are already animated, |
| setup: function () { | ||
| setup(props) { | ||
| /** The duration of the transition in ms. */ | ||
| const transitionDuration = 250; |
There was a problem hiding this comment.
would make sense to configure this via prop? 🤔 We would use v-bind in the scss to have the same value
joseacabaneros
approved these changes
Aug 19, 2024
packages/x-components/src/components/animations/staggered-fade-and-slide.vue
Outdated
Show resolved
Hide resolved
packages/x-components/src/components/animations/staggered-fade-and-slide.vue
Outdated
Show resolved
Hide resolved
joseacabaneros
approved these changes
Aug 19, 2024
diegopf
approved these changes
Aug 19, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation and context
Refactor the
StaggeredFadeAndSlidecomponent to use the native Vue3TransitionGroupcomponent instead of our customStaggeringTransitionGroupType of change
What is the destination branch of this PR?
MainHow has this been tested?
Tests performed according to testing guidelines:
Checklist: