From 837f3677a0f7159da74ecde2644c9c5ca579f26b Mon Sep 17 00:00:00 2001 From: Michael Urban Date: Tue, 2 Nov 2021 06:40:53 -0500 Subject: [PATCH 1/2] docs(animations): update developers on state of package Notify developers that @angular/animations package has been "significantly de-prioritized" `animateChild` documentation now references #30477 References #30477# Please enter the commit message for your changes. Lines starting --- aio/content/guide/animations.md | 8 +++++++- aio/content/guide/route-animations.md | 11 +++++++++++ packages/animations/src/animation_metadata.ts | 4 ++++ 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index f6f81b83a5e2..47635872266f 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -1,5 +1,11 @@ # Introduction to Angular animations +
+ +***The Angular team does not currently have a Web Animations API domain expert on staff.*** As such, the ```@angular/animations``` package, and all bugs/issues related to it, have been significantly deprioritized. Some example code in this document may not function as described. If you would like to contribute to Angular, please see [Contributing to Angular](https://github.com/angular/angular/blob/master/CONTRIBUTING.md) + +
+ Animation provides the illusion of motion: HTML elements change styling over time. Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic. Animations can improve your application and user experience in a number of ways: * Without animations, web page transitions can seem abrupt and jarring. @@ -314,7 +320,7 @@ What it does animateChild() -Allows animations on child components to be run within the same timeframe as the parent. +Allows animations on child components to be run within the same timeframe as the parent. Note: Please see GitHub Issue #30477 before attempting to use animateChild() together with route transition animations. diff --git a/aio/content/guide/route-animations.md b/aio/content/guide/route-animations.md index 473c3b9d6bc5..35bcfb08910a 100644 --- a/aio/content/guide/route-animations.md +++ b/aio/content/guide/route-animations.md @@ -75,6 +75,11 @@ Animations can be defined directly inside your components. For this example you The following code snippet defines a reusable animation named `slideInAnimation`. +
+ +**Note:** `animateChild()` does not currently work with route transition animations. Please see GitHub Issue #30477 for more information. + +
@@ -109,6 +114,12 @@ Use the `query()` method to find and animate elements within the current host co Assume that you are routing from the *Home => About*. +
+ +**Note:** `animateChild()` does not currently work with route transition animations. Please see GitHub Issue #30477 for more information. + +
+ The animation code does the following after styling the views: diff --git a/packages/animations/src/animation_metadata.ts b/packages/animations/src/animation_metadata.ts index 2ad8afd1f6cb..02ba732d30ab 100755 --- a/packages/animations/src/animation_metadata.ts +++ b/packages/animations/src/animation_metadata.ts @@ -1114,6 +1114,10 @@ export function animation( * with animations that are assigned using the Angular animation library. CSS keyframes * and transitions are not handled by this API. * + * `animateChild()` does not currently work with route transition animations. Please see + * GitHub Issue {@link https://github.com/angular/angular/issues/30477 #30477} for more + * information. + * * @publicApi */ export function animateChild(options: AnimateChildOptions|null = null): From 1248eeb501300b27876b8be3bbccbdffe2a1b993 Mon Sep 17 00:00:00 2001 From: Pete Bacon Darwin Date: Sat, 6 Nov 2021 13:36:11 +0000 Subject: [PATCH 2/2] fixup! docs(animations): update developers on state of package --- aio/content/guide/animations.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 47635872266f..4523d48d584e 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -1,11 +1,5 @@ # Introduction to Angular animations -
- -***The Angular team does not currently have a Web Animations API domain expert on staff.*** As such, the ```@angular/animations``` package, and all bugs/issues related to it, have been significantly deprioritized. Some example code in this document may not function as described. If you would like to contribute to Angular, please see [Contributing to Angular](https://github.com/angular/angular/blob/master/CONTRIBUTING.md) - -
- Animation provides the illusion of motion: HTML elements change styling over time. Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic. Animations can improve your application and user experience in a number of ways: * Without animations, web page transitions can seem abrupt and jarring.