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
fix(animations): fix stagger timing not handling params #47208
fix(animations): fix stagger timing not handling params #47208
Conversation
prior to this change the stagger timing was being built during the ast building instead of dynamically when visiting the stagger animation, thus it could not handle params correctly, this change makes it so that during ast building a timing ast is built instead and that ast is used dynammically to build animations which can handle params correctly resolves angular#19786
361c7e8
to
c2bb768
Compare
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.
LGTM 🍪
Thanks for addressing this longstanding bug, @dario-piotrowicz!
|
||
const [p1, p2, p3, p4, p5] = players; | ||
expect(p5.delay).toEqual(0); | ||
expect(p4.delay).toEqual(1111); |
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.
This is non-blocking, but it would be great if these tests also validated the style values and not just the delays. That way we verify stagger is working as intended, rather than just that the negative delay is applied.
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.
sure I can add some checks 🙂👍
This PR was merged into the repository by commit 05f5e8a. |
prior to this change the stagger timing was being built during the ast building instead of dynamically when visiting the stagger animation, thus it could not handle params correctly, this change makes it so that during ast building a timing ast is built instead and that ast is used dynammically to build animations which can handle params correctly resolves #19786 PR Close #47208
prior to this change the stagger timing was being built during the ast building instead of dynamically when visiting the stagger animation, thus it could not handle params correctly, this change makes it so that during ast building a timing ast is built instead and that ast is used dynammically to build animations which can handle params correctly resolves #19786 PR Close #47208
improve the stagger timing unit tests added in angular#47208 by also checking that the duration and keyframes of the players are correct
improve the stagger timing unit tests added in angular#47208 by also checking that the duration and keyframes of the players are correct
…lar#47208)" This reverts commit 05f5e8a. Reason: breaks internal g3 tests
prior to this change the stagger timing was being built during the ast building instead of dynamically when visiting the stagger animation, thus it could not handle params correctly, this change makes it so that during ast building a timing ast is built instead and that ast is used dynammically to build animations which can handle params correctly (this PR reinstates the changes done in angular#47208 which have been reverted because negative non-parametrized stagger values were not handled correctly, alongside the original changes the current commit also handles corretly negative non-parametrized values and improves unit testing) resolves angular#19786
prior to this change the stagger timing was being built during the ast building instead of dynamically when visiting the stagger animation, thus it could not handle params correctly, this change makes it so that during ast building a timing ast is built instead and that ast is used dynammically to build animations which can handle params correctly (this PR reinstates the changes done in angular#47208 which have been reverted because negative non-parametrized stagger values were not handled correctly, alongside the original changes the current commit also handles corretly negative non-parametrized values and improves unit testing) resolves angular#19786
This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular/animations](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fanimations/14.1.3/14.2.0) | | [@angular/common](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fcommon/14.1.3/14.2.0) | | [@angular/compiler](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fcompiler/14.1.3/14.2.0) | | [@angular/compiler-cli](https://github.com/angular/angular/tree/main/packages/compiler-cli) ([source](https://github.com/angular/angular)) | devDependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fcompiler-cli/14.1.3/14.2.0) | | [@angular/core](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fcore/14.1.3/14.2.0) | | [@angular/forms](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fforms/14.1.3/14.2.0) | | [@angular/platform-browser](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser/14.1.3/14.2.0) | | [@angular/platform-browser-dynamic](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser-dynamic/14.1.3/14.2.0) | --- ### Release Notes <details> <summary>angular/angular</summary> ### [`v14.2.0`](https://github.com/angular/angular/blob/HEAD/CHANGELOG.md#​1420-2022-08-25) [Compare Source](angular/angular@14.1.3...14.2.0) ##### animations | Commit | Type | Description | | -- | -- | -- | | [b96e571897](angular/angular@b96e571) | fix | fix stagger timing not handling params ([#​47208](angular/angular#47208)) | ##### common | Commit | Type | Description | | -- | -- | -- | | [b380fdd59e](angular/angular@b380fdd) | feat | add a density cap for image srcsets ([#​47082](angular/angular#47082)) | | [7ce497e5bc](angular/angular@7ce497e) | feat | add built-in Imgix loader ([#​47082](angular/angular#47082)) | | [bff870db61](angular/angular@bff870d) | feat | add cloudflare loader ([#​47082](angular/angular#47082)) | | [86e77a5d55](angular/angular@86e77a5) | feat | add Image directive skeleton ([#​45627](angular/angular#45627)) ([#​47082](angular/angular#47082)) | | [0566205a02](angular/angular@0566205) | feat | Add image lazy loading and fetchpriority ([#​47082](angular/angular#47082)) | | [4e952ba216](angular/angular@4e952ba) | feat | add loaders for cloudinary & imagekit ([#​47082](angular/angular#47082)) | | [e854a8cdde](angular/angular@e854a8c) | feat | add loading attr to NgOptimizedImage ([#​47082](angular/angular#47082)) | | [8d3701cb4c](angular/angular@8d3701c) | feat | add warnings re: image distortion ([#​47082](angular/angular#47082)) | | [d5f7da2120](angular/angular@d5f7da2) | feat | define public API surface for NgOptimizedImage directive ([#​47082](angular/angular#47082)) | | [d3c3426aa4](angular/angular@d3c3426) | feat | detect LCP images in `NgOptimizedImage` and assert if `priority` is set ([#​47082](angular/angular#47082)) | | [451b85ca17](angular/angular@451b85c) | feat | explain why width/height is required ([#​47082](angular/angular#47082)) | | [586274fe65](angular/angular@586274f) | feat | provide an ability to exclude origins from preconnect checks in NgOptimizedImage ([#​47082](angular/angular#47082)) | | [57f3386e5b](angular/angular@57f3386) | feat | support custom srcset attributes in NgOptimizedImage ([#​47082](angular/angular#47082)) | | [7baf9a46cd](angular/angular@7baf9a4) | feat | verify that priority images have preconnect links ([#​47082](angular/angular#47082)) | | [f81765b333](angular/angular@f81765b) | feat | warn if rendered size is much smaller than intrinsic ([#​47082](angular/angular#47082)) | | [e2ab99b95e](angular/angular@e2ab99b) | fix | allow null/undefined to be passed to ngClass input ([#​39280](angular/angular#39280)) ([#​46906](angular/angular#46906)) | | [bedf537951](angular/angular@bedf537) | fix | allow null/undefined to be passed to ngStyle input ([#​47069](angular/angular#47069)) | | [f9511bf6e8](angular/angular@f9511bf) | fix | avoid interacting with a destroyed injector ([#​47243](angular/angular#47243)) | | [dc29e21b14](angular/angular@dc29e21) | fix | consider density descriptors with multiple digits as valid ([#​47230](angular/angular#47230)) | | [801daf82d1](angular/angular@801daf8) | fix | detect `data:` and `blob:` inputs in `NgOptimizedImage` directive ([#​47082](angular/angular#47082)) | | [fff8056e7f](angular/angular@fff8056) | fix | fix formatting on oversized image error ([#​47188](angular/angular#47188)) ([#​47232](angular/angular#47232)) | | [1ca2ce19ab](angular/angular@1ca2ce1) | fix | remove default for image width ([#​47082](angular/angular#47082)) | | [c5db867ddc](angular/angular@c5db867) | fix | remove duplicate deepForEach ([#​47189](angular/angular#47189)) | | [1cf43deb18](angular/angular@1cf43de) | fix | sanitize `rawSrc` and `rawSrcset` values in NgOptimizedImage directive ([#​47082](angular/angular#47082)) | | [d71dfe931f](angular/angular@d71dfe9) | fix | set bound width and height onto host element ([#​47082](angular/angular#47082)) | | [32caa8b669](angular/angular@32caa8b) | fix | support density descriptors with 2+ decimals ([#​47197](angular/angular#47197)) ([#​47232](angular/angular#47232)) | | [ae4405f0bf](angular/angular@ae4405f) | fix | throw if srcset is used with rawSrc ([#​47082](angular/angular#47082)) | | [0c8eb8bc82](angular/angular@0c8eb8b) | perf | monitor LCP only for images without `priority` attribute ([#​47082](angular/angular#47082)) | ##### compiler-cli | Commit | Type | Description | | -- | -- | -- | | [ea89677c12](angular/angular@ea89677) | feat | support more recent version of `tsickle` ([#​47018](angular/angular#47018)) | ##### core | Commit | Type | Description | | -- | -- | -- | | [d1e83e1b30](angular/angular@d1e83e1) | feat | add `createComponent` function ([#​46685](angular/angular#46685)) | | [10becab70e](angular/angular@10becab) | feat | add `reflectComponentType` function ([#​46685](angular/angular#46685)) | | [4b377d3a6d](angular/angular@4b377d3) | feat | introduce createApplication API ([#​46475](angular/angular#46475)) | | [31429eaccc](angular/angular@31429ea) | feat | support TypeScript 4.8 ([#​47038](angular/angular#47038)) | | [796840209c](angular/angular@7968402) | fix | align TestBed interfaces and implementation ([#​46635](angular/angular#46635)) | ##### forms | Commit | Type | Description | | -- | -- | -- | | [426af91a42](angular/angular@426af91) | feat | add `FormBuilder.record()` method ([#​46485](angular/angular#46485)) | | [b302797de4](angular/angular@b302797) | fix | Correctly infer `FormBuilder` types involving `[value, validators]` shorthand in more cases. ([#​47034](angular/angular#47034)) | ##### language-service | Commit | Type | Description | | -- | -- | -- | | [598b72bd05](angular/angular@598b72b) | feat | support fix the component missing member ([#​46764](angular/angular#46764)) | ##### platform-browser | Commit | Type | Description | | -- | -- | -- | | [07606e3181](angular/angular@07606e3) | feat | add `isEmpty` method to the `TransferState` class ([#​46915](angular/angular#46915)) | ##### platform-server | Commit | Type | Description | | -- | -- | -- | | [2b4d7f6733](angular/angular@2b4d7f6) | feat | support document reference in render functions ([#​47032](angular/angular#47032)) | ##### router | Commit | Type | Description | | -- | -- | -- | | [0abb67af59](angular/angular@0abb67a) | feat | allow guards and resolvers to be plain functions ([#​46684](angular/angular#46684)) | | [75df404467](angular/angular@75df404) | feat | Create APIs for using Router without RouterModule ([#​47010](angular/angular#47010)) | | [10289f1f6e](angular/angular@10289f1) | feat | expose resolved route title ([#​46826](angular/angular#46826)) | | [8600732b09](angular/angular@8600732) | feat | Expose the default matcher for `Routes` used by the `Router` ([#​46913](angular/angular#46913)) | | [422323cee0](angular/angular@422323c) | feat | improve typings for RouterLink boolean inputs ([#​47101](angular/angular#47101)) | | [26ea97688c](angular/angular@26ea976) | feat | Make router directives standalone ([#​46758](angular/angular#46758)) | | [2a43beec15](angular/angular@2a43bee) | fix | Fix route recognition behavior with some versions of rxjs ([#​47098](angular/angular#47098)) | ##### service-worker | Commit | Type | Description | | -- | -- | -- | | [383090858c](angular/angular@3830908) | feat | support `sendRequest` as a `notificationclick` action ([#​46912](angular/angular#46912)) | | [3f548610dd](angular/angular@3f54861) | fix | export NoNewVersionDetectedEvent ([#​47044](angular/angular#47044)) | | [482b6119c2](angular/angular@482b611) | fix | update golden `index.md` ([#​47044](angular/angular#47044)) | #### Special Thanks Alex Rickabaugh, Andrew Kushnir, Andrew Scott, Bob Watson, Cédric Exbrayat, Dylan Hunn, Emmanuel Roux, FatalMerlin, George Kalpakas, Ilia Mirkin, Jan Kuehle, Jeremy Elbourn, Jessica Janiuk, JiaLiPassion, Kalbarczyk, Kara Erickson, Katie Hempenius, Kristiyan Kostadinov, Merlin, Paul Gschwendtner, Pawel Kozlowski, Tristan Sprößer, Victor Porof, angular-robot\[bot], dario-piotrowicz, ivanwonder and vyom <!-- CHANGELOG SPLIT MARKER --> </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, click this checkbox. --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzMi4xNzQuMiIsInVwZGF0ZWRJblZlciI6IjMyLjE3Ny4xIn0=--> Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1523 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
prior to this change the stagger timing was being built during the
ast building instead of dynamically when visiting the stagger animation,
thus it could not handle params correctly, this change makes it so that
during ast building a timing ast is built instead and that ast is used
dynammically to build animations which can handle params correctly
resolves #19786
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
trying to use a parameters inside a stagger timings' argument (such as for example
stagger('{{myParam}}', [...
)results in an error being displayed in the console and the animation not running
Issue Number: #19786
What is the new behavior?
params used inside a stagger timing's argument are correctly handled
Does this PR introduce a breaking change?