Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`animateChild` does not work when used in router transitions

See original GitHub issue

🐞 bug report

Affected Package

The issue is caused by package @angular/animations

Is this a regression?

It never worked

Description

animateChild does not work when used in router transitions as explained in the official documentation

animateChild should start child transitions but nothing happens.

🔬 Minimal Reproduction

stackblitz

‘Content page x’ should be red and slowly switch back to black when switching page.

Remove the [@routerAnimations]="prepareRoute(outlet)" and switch page to confirm that the animation is working but just not triggered.

🔥 Exception or Error

No error shown.

🌍 Your Environment

Angular Version:




@angular@7.2.15

Anything else relevant?

Issue Analytics

State:
Created 4 years ago
Reactions:6
Comments:30 (15 by maintainers)

Top GitHub Comments

4reactions

michaelurbancommented, Nov 15, 2021

@dario-piotrowicz Fantastic news that this may be a query issue. A mild inconvenience can be a simple hurdle to one dev and a brick wall to another, especially when the docs say it should work.

You have no idea how grateful I am that you’re working on this.

Mike awarded Dario:🏅(participant)

And I’ll have a freshly minted🥇1st place medal for you at this ticket’s closing ceremony!

3reactions

petebacondarwincommented, Nov 25, 2021

Thanks @dario-piotrowicz - as discussed I will close this issue and we should continue with #44253

Top Results From Across the Web

AnimateChild does not work for child :leave transition

In order to do this i've read that i have to use query('@*', animateChild()) . The problem is this still does not work....

Route transition animations - Angular

Calls the animateChild() method on the new view to run its child animations after the main animation completes. You now have a basic...

In-Depth guide into animations in Angular - inDepth.dev

In order to run both animations, the parent animation must query each element containing the child animations and run it using the animateChild ......

Routing Animation in Angular - Medium

Well, you might think, Why Animations? . I'd say why not? Animations are awesome ❤️❤️. Animation are used to make transitions more...

Angular Router Animations Guide - Fireship

Smooth animated router transitions will impress your users and set your ... The group method is used run multiple animations concurrently.