I'm in the process of developing an Angular animation, but it seems like it's not working as expected at the moment.
Here is my code snippet:
trigger("fadeInOut", [
transition("* => *", [
query(":enter", [style({ opacity: 0 })], { optional: true }),
query(
":leave",
[style({ opacity: 1 }), animate("2s", style({ opacity: 0 }))],
{ optional: true }
),
query(
":enter",
[style({ opacity: 0 }), animate("2s", style({ opacity: 1 }))],
{ optional: true }
)
])
])
This code aims to achieve a simple fadeIn/fadeOut effect when adding or removing elements. Here is how it looks in HTML:
<main @fadeInOut class="container">
<div *ngIf="state">State is true</div>
<div *ngIf="!state">State is false</div>
</main>
You can view the result on Stackblitz. When toggling the state, a different div element should be displayed, but without any animation. However, upon reloading, a nice fadeIn effect can be observed.
I attempted to apply the @fadeInOut* directly on the div elements, but that did not resolve the issue. It appears there may be a misunderstanding on my part regarding the use of transition and/or query. Any advice or guidance would be greatly appreciated!