(animate.enter) and (animate.leave) #63127
Description
Which @angular/* package(s) are the source of the bug?
animations, core
Is this a regression?
No
Description
if using @if directive to show and remove an element and the exit animation is longer as compared to enter animation and we switch back the toggle to true, this add additional element to DOM again with enter animation while other element is already in leave animation
TEMPLATE
@if (isOpen()) {
<div
(animate.enter)="enterAnimation($event)"
(animate.leave)="leaveAnimation($event)">
<p>ELEMENT</p>
</div>
}
enterAnimation(event: any) {
console.log('enterAnimation', event);
gsap.fromTo(
event.target,
{
yPercent: 100, // start off-screen above
opacity: 0
},
{
yPercent: 0, // slide down into place
opacity: 1,
duration: .5,
ease: "power1.out",
onComplete: () => {
event.animationComplete();
}
}
);
}
leaveAnimation(event: any) {
console.log('leaveAnimation', event);
gsap.to(event.target,
{
yPercent: 100, // slide down into place
opacity: 0,
duration: 10,
ease: "power1.in",
onComplete: () => {
event.animationComplete();
}
}
);
}
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