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.

Ivy: :leave animations trigger when navigating away from component

See original GitHub issue

🐞 Bug report

Affected Package

@angular/animations (presumably)

Is this a regression?

No, happens in all versions of 9.x with Ivy enabled.

Description

When an animation query is specified with :leave, it should only fire when an item is added/removed per the documentation. In 9.x with Ivy enabled, however, all :leave animations fire whenever the component is navigated away from, even though nothing is being added/removed. This is especially annoying because the new component won’t load until the animations have finished.

You can disable Ivy in the repro and see that it does what you would expect–:leave doesn’t fire when navigating away from the component.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-udwujp

🔥 Exception or Error

N/A

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.1
Node: 13.12.0
OS: win32 x64

Angular: 9.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.1
@angular-devkit/build-angular     0.901.1
@angular-devkit/build-optimizer   0.901.1
@angular-devkit/build-webpack     0.901.1
@angular-devkit/core              9.1.1
@angular-devkit/schematics        9.1.1
@ngtools/webpack                  9.1.1
@schematics/angular               9.1.1
@schematics/update                0.901.1
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant? N/A

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:8 (3 by maintainers)

Top GitHub Comments

1reaction

petebacondarwincommented, Sep 29, 2021

None of our bots will automatically close any issue. We have a bot that locks closed issues after a certain amount of time. And we have a bot that might mark feature requests as having insufficient support (in terms of votes). But neither of these will ever close an issue automatically (at least that is the current state of how they work).

Animations is lower priority for the core team right now as there are other more pressing areas of the framework that we are focussing on such as forms, router, compiler, etc.

0reactions

petebacondarwincommented, Sep 29, 2021

Consider that there are only 2 up votes on this issue; and apart from @kzay, you are the only person to comment on this issue in 18 months since it was reported.

Top Results From Across the Web

Animation transitions and triggers - Angular

The :enter transition runs when any *ngIf or *ngFor views are placed on the page, and :leave runs when those views are removed...

Route Transition Animations - Angular 11 - W3cubDocs

Let's illustrate a router transition animation by navigating between two routes, Home and About associated with the HomeComponent and AboutComponent views ...

Animating Angular Route Transitions | by Jared Youtsey | ngconf

When navigating from Three to Two the animations will be reversed. In addition, the opacity of the views will be animated as they...

Prevent angular animation when switching route

As suggested in the comment I can wrap the arrayAnim div within another one that would disable animations based on a component variable....

8 Tips for Getting Rid of Poison Ivy on Your Property

The toxic resin that causes a poison ivy rash is called urushiol, and it is present in every part of the plant: the...