ngIf et des enfants Animations - Angular4

Question

Je le modèle suivant dans angulaire 4:

<button (click)="isVisible = !isVisible" >Toggle</button> 

<div class="global-block" *ngIf="isVisible" > 
    <div class="content" [@slideRightLeft]> 
     ... some content here ... 
    </div> 
    <div class="overlay" [@fadeIn]></div> 
</div> 

ont déjà été créées à la fois l'animation slideRightLeft et fadeIn en mode de déclenchement et de transition.

Le problème est que cela fonctionne pour la première bascule (quand isVisible == true), mais pas quand je le cache (quand isVisible == false, le .global-block est caché instantanément et les animations pour les enfants ne sont pas visibles).

Je veux vraiment avoir 2 animations différentes pour les éléments enfants, mais je dois aussi faire basculer la .global-block

est-il un moyen de retarder le ngIf? ou peut-être que mon approche n'est pas bonne?

Answer 1

Yea ngIf nuke immédiatement ceux du DOM, supprimant tous les descendants et leurs animations associées. Vous pouvez faire en sorte que le bouton ne change la bascule qu'après un certain temps, en attendant que les animations se terminent, ou vous pouvez utiliser une autre méthode de masquage (visibilité + opacité) qui ne les supprimera pas du DOM.

Vous pourriez probablement envelopper tout dans les états d'animation - peut-être même pas besoin d'utiliser ngIf. Vous pouvez utiliser une chaîne pour différencier un nombre quelconque d'états d'animation différents et les styliser en conséquence. Ainsi, vous pourriez avoir un état qui était 'bouton juste cliqué', un autre 'bouton cliqué il y a 1000ms', et un autre 'animations over' (n'utilisez pas ces chaînes littéralement ... mais vous obtenez ce que je veux dire). Cela rendrait le comportement beaucoup plus prévisible.