Animate *ngIf with Ionic Animations

I’m currently investing time into Ionic Animations and Gestures. With Angular Animations it is possible to define animations which “plays” when the element is added or removed from DOM via ngIf. With Ionic it is more tricky.

The “enter” Animation is easy possible by a Directive which plays the Animation on ngOnInit, but what about the “leave” Animation? ngOnDestroy is not possible, as it destorys the element before it can be played. Is it possible to “wait” before completly destroing it? Any suggestions ir ideas? :blush:

My first instinct is that if you can do birth but not death, then turn a death into a birth.

I’m imagining a Tombstone component that is swapped in for the live component using an ngIf’s else block, and the animation for the death of the ordinary component can be then treated as the birth of its tombstone.

1 Like

Unsure if i understand you correctly. So instead of animting the leave of Component A, i duplicate it, remove it and the enter of the Component B is the Leave of Component A?

Yes, more or less, although I was envisioning just a single “Component B” that could be used to cover the “leave” animation of any “Component A”. Not sure if that’s a feasible way to go, but figured that N+1 components looked a lot more manageable than N*2.