docs: fix layout shift when refreshing the stagger example#69634
Open
erkamyaman wants to merge 1 commit into
Open
docs: fix layout shift when refreshing the stagger example#69634erkamyaman wants to merge 1 commit into
erkamyaman wants to merge 1 commit into
Conversation
Contributor
Author
|
Deployed adev-preview for c2ab6b9 to: https://ng-dev-previews-fw--pr-angular-angular-69634-adev-prev-4mfelrzq.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
JeanMeche
reviewed
Jul 3, 2026
Clicking "Refresh" toggles the list out of and back into the DOM, but the `<ul>` lived inside the `@if`, so removing it collapsed the layout and caused a vertical jump. Wrap the list in a fixed-height `.items-container` to reserve the space while it re-mounts. Also key the stagger delay off `$index` so the first item animates immediately instead of being delayed a step.
c2ab6b9 to
6369783
Compare
JeanMeche
approved these changes
Jul 3, 2026
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Clicking "Refresh" toggles the list out of and back into the DOM, but the
<ul>lived inside the@if, so removing it collapsed the layout and caused a vertical jump. Wrap the list in a fixed-height.items-containerto reserve the space while it re-mounts. Also key the stagger delay off$indexso the first item animates immediately instead of being delayed a step.PR Checklist
Please check that your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
In the native-css "Stagger" animations example, clicking Refresh makes the whole box shrink and snap back, with the list jumping up and then down. This happens because the
<ul>sits inside the@if, so replaying the animation removes it from the layout and collapses the container to zero height. The first item is also delayed one full step before it animates in, because the stagger delay is keyed off the item value instead of its position.Screen.Recording.2026-07-03.at.17.46.31.mov
What is the new behavior?
The list is wrapped in a fixed-height
.items-container(matching the wrapper convention used by the neighboring insert/remove/open-close examples), so the space is held while the list re-mounts and there is no layout jump. The stagger delay is keyed off$index, so the first item animates immediately and the cascade no longer depends on the item values.Screen.Recording.2026-07-03.at.17.46.57.mov
Does this PR introduce a breaking change?