angular icon indicating copy to clipboard operation
angular copied to clipboard

animation leave not work

Open SimonAdamPottier opened this issue 3 years ago • 1 comments

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

SimonAdamPottier avatar Jan 24 '22 15:01 SimonAdamPottier

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"></GridLayout>

then replace :enter and :leave by * => true and * => false

Really ugly solution but it works

SimonAdamPottier avatar Jan 25 '22 10:01 SimonAdamPottier