AnimateChild ne fonctionne pas pour les enfants: quitter la transition

Question

J'ai un "@angular/animations": "^4.3.0" angulaire installé dans mon projet et j'essaie d'exécuter un childAnimation().

I deux animations, une pour un parent et une pour un élément enfant. Les deux avec: entrer et: laisser des transitions. L'élément parent est affiché en fonction de *ngIf="isOpen".

: entrez les travaux sur les deux éléments, mais: laisser non animé sur l'élément enfant

Pour ce faire, je l'ai lu que je dois utiliser query('@*', animateChild()). Le problème est que cela ne fonctionne toujours pas. Y a-t-il quelque chose qui me manque ici? Ma conjecture est que: congé ne fonctionne pas sur l'enfant comme seul le parent est déclenché avec * ngIf, mais comment puis-je déclencher un: laisser la transition sur l'enfant alors?

modèle

:

<div *ngIf="isOpen" [@fadeAnimation] (click)="close()"> 
    <div [@slideHorizontalAnimation] (click)="$event.stopPropagation();"> 
    ... 
    </div> 
</div> 

animations:

export const fadeAnimation = trigger(
    'fadeAnimation', 
    [ 
     transition(
      ':enter', 
      [ 
       style({ opacity: 0 }), 
       animate('100ms', style({ opacity: 1 })) 
      ] 
     ), 
     transition(
      ':leave', 
      [ 
       style({ opacity: 1 }), 
       animate('100ms', style({ opacity: 0 })), 
       query('@*', animateChild()) 
      ] 
     ) 
    ] 
); 

export const slideHorizontalAnimation = trigger(
    'slideHorizontalAnimation', 
    [ 
     transition(
      ':enter', 
      [ 
       style({ transform: 'translateX(-100%)', opacity: 0 }), 
       animate('100ms', style({ transform: 'translateX(0)', opacity: 1 })) 
      ] 
     ), 
     transition(
      ':leave', 
      [ 
       style({ transform: 'translateX(0)', opacity: 1 }), 
       animate('100ms', style({ transform: 'translateX(-100%)', opacity: 0 })) 
      ] 
     ) 
    ] 
); 

Answer 1

Cela pourrait être lié à https://github.com/angular/angular/issues/15798

[Animation] Dans Angular4, laissez (* -> void) animation n » t feu lorsque l'élément est détruit par ngIf changement de valeur

et https://github.com/angular/angular/issues/15753

Laisser l'animation ne fonctionne pas dans une animation imbriquée d'un composant enfant

Même si on les semblent être fermées, certaines personnes semblent penser que ce n'est pas. Le second est encore ouvert

MISE À JOUR: Il peut être fixé par https://github.com/angular/angular/pull/19006 qui n'a pas encore fusionné