Animation (animation personnalisée) ne fonctionne pas dans le contrôle sidenav

Question

Je ne sais pas exactement si je me trompe n'importe où. J'ai deux * ngFor liste et un contrôle sidenav. J'utilise démo angular2 exemple donné sur le site officiel (https://angular.io/api/animations/query) sur l'animation qui fonctionne bien à l'intérieur ou à l'extérieur de sidenav control(angular-material). MAIS quand j'utilise mon animation personnalisée, ça fonctionne bien en dehors du contrôle sidenav mais ça ne marche pas dans le contrôle sidenav.

Note: par souci de concision, j'ai supprimé le code inutile de contrôle sidenav

https://plnkr.co/edit/pbW2BpMzQzFe792DTUwv?p=preview
(Remarque: si vous regardez ce plunker, vous pourrez facilement venir à savoir où le problème dernier. ngFor liste devrait fonctionner qui ne fonctionne pas. Tous ngFor sont conservés dans la même page.

animations: [ 

    //MY CUSTOM ANIMATION   

    trigger('myAnimation', [ 

     transition('*=>*',[ 
      query(':enter',style({opacity:0}),{optional:true}), 

      query(':enter',stagger('300ms',[ 
       animate('1s',keyframes([ 
       style({opacity:0,transform:'translateY(-20px)',offset:0}), 
       style({opacity:.5,transform:'translateY(20px)',offset:0.3}), 
       style({opacity:0,transform:'translateY(0)',offset:1}), 
       ])) 
      ]),{optional:true} 
     ) 
     ]) 

    ]), 

    //DEMO ANIMATION AVAILABLE AT ANGULAR.IO 

    trigger('queryAnimation', [ 
    transition('* => goAnimate', [ 
     // hide the inner elements 
     query('h1', style({ opacity: 0 })), 
     query('.content', style({ opacity: 0 })), 

     // animate the inner elements in, one by one 
     query('h1', animate(2000, style({ opacity: 1, background:'yellow' })), 
     query('.content', animate(3000, style({ opacity: 1, background:'red' })), 
    ]) 
    ]) 
    ] 

Prob le lem semble être très simple mais je suis incapable de comprendre. De l'aide serait grandement appréciée !

Answer 1

Je pense que le problème est dans l'élément div avec votre animation entrant dans le DOM HTML en même temps que ses enfants, donc ils ne sont pas animés - l'événement :enter ne se produit pas. Pour contourner, vous pouvez attribuer le tableau items de manière asynchrone (plunker):

this.items=[]; 
setTimeout(() => { 
    this.items=[{Id:1,name:"Nyks1"},{Id:2,name:"Nyks2"},{Id:3,name:"Nyks3"}]; 
});