Angular 动画（自定义动画）在sidenav控件中不起作用

我完全不知道我是否在任何地方出错。 我有两个*ngFor列表和一个sidenav控件

我正在使用官方网站（）上给出的angular2示例演示，关于动画，它在

sidenav控件（角度材质）

内部或外部运行良好。 但是，当我使用自定义动画时，它在sidenav控件之外工作正常，但在sidenav控件内部不工作

注意：为了简洁起见，我删除了sidenav控件不必要的代码

（注意：如果您查看此插件，您将很容易知道问题出在哪里。最后一个ngFor列表应该工作，但不工作。所有ngFor都保存在同一页面中

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' })),
     ])
   ])
  ]

---

问题似乎很简单，但我无法解决。非常感谢您的帮助！

我认为问题出在

div

元素中，您的动画与子动画同时进入HTML DOM，因此它们不会被设置动画-

：enter

事件不会发生。要绕过它，您可以指定

项

异步数组（）：

---

我认为问题出在

div

元素中，您的动画与其子元素同时进入HTML DOM，因此它们不会被设置动画-

：enter

事件不会发生。要绕过它，您可以异步地分配

项

数组（）：

---

有人请帮助。我的所有组件都在sidenav控制范围内，动画在sidenav内因某种原因无法工作。有人请帮助。我的所有组件都在sidenav控制范围内，动画在sidenav内因某种原因无法工作。感谢您的回复。我感谢您的回答，但问题是为什么它在demo s中工作足够的代码而不是我的代码？两者几乎相等。谢谢你的回答。我感谢你的回答，但问题是为什么它适用于演示示例代码而不是我的代码？两者几乎相等。

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