Two elements appear when leave animation is running and `@if` is toggled true

[thePunderWoman]

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

core

Is this a regression?

No

Description

In the case where you use an animate.enter and an animate.leave with a longer animation time you can see a duplicated element in the case that you toggle the @if to true while the leave animation is running. While this is expected, ideally we should not see duplicated elements.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

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

Anything else?

No response

[thePunderWoman]

The biggest challenge here is that while the leave animation is running, the element is technically destroyed and Angular only can create a new element at this point. Ideally we could cancel / complete the running animations and remove the node right away in this situation, but we'd have to know which element to remove.

[kbrilla]

Well in native css world with :starting-style and :exit-style I would expect to see duplicated elements as well, so mayby it's not unexpected at all?

Another way I see it, would be to reuse dom node that are sheduled to be destroyed afrer animation ends? But that would probably lead to changes in ivy?

[thePunderWoman]

@kbrilla yeah, that's totally expected, but it's just not ideal. We definitely wouldn't re-use the DOM node at this point. We should be able to identify the exiting DOM node though and be able to remove it immediately in the case that an enter is about to happen.