animation leave not work #52
Description
Environment
- NativeScript-Angular: 12.2.0
- Angular: 12.2.0
Describe the bug
:leave or * => void not working
To Reproduce
`import {animate, style, transition, trigger} from '@angular/animations';
export const fadeInOutAnimation = trigger('fadeInOut', [
// OK
transition(':enter', [
style({opacity: 0}),
animate('3s linear', style({opacity: 1}))
]),
// KO
transition(':leave', [
style({opacity: 1}),
animate('3s linear', style({opacity: 0}))
])
]);`
Expected behavior
Await before removing element from DOM
Activity
[-]animation leave not working[/-][+]animation leave not work[/+]SimonAdamPottier commentedon Jan 25, 2022
Here is a temporary trick:
Don't use ngIf. repalce it by hidden and a variable triggered by animation start and done
<GridLayout [@fadeinout]="openCloseBooleanVar" (@fadeinout.start)="isVisibleBooleanVar= true" (@fadeInOut.done)="isVisibleBooleanVar = openCloseBooleanVar" [hidden]="!isVisibleBooleanVar">
then replace :enter and :leave by * => true and * => false
Really ugly solution but it works