Skip to content

animate.enter on new item and animate.leave on existing item don't trigger at the same time in @for #63307

@princemaple

Description

@princemaple

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

So when I click on inc I expect to see one item sliding in and one item sliding out.

In fact, only the entering item is animated.

And when I remove the .concat([l.at(-1)! + 1]) part, so new items are not created, I can now see the old items going out animated.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-wrhcidhc?file=src%2Fmain.ts

Please provide the exception or error you saw

No obvious error other than animation not working as expected.

Please provide the environment you discovered this bug in (run ng version)

All latest 20.2

Anything else?

In my own projects, which are still using platformBrowser().bootstrapModule(...) I notice that having BrowserAnimationsModule fixes this problem. I fount out about this because BrowserAnimationsModule is now deprecated and I wanted to remove it sooner rather than later. I ran into this bug while trying to use the new seemingly obvious feature. Simply adding it back makes both enter and leave animations work as expected.

I also tried adding BrowserAnimationsModule in the stackblitz example, to prove my point, but it error-ed. I don't know how to fix the error, I will have to leave it in as a comment.

Metadata

Metadata

Labels

area: coreIssues related to the framework runtimecore: animationsIssues related to `animate.enter` and `animate.leave`state: has PR

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions