Question

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

我正在官方网站（https://angular.io/api/animations/query）上使用angular2示例演示，该动画在sidenav control(angular-material)内外工作正常。但是当我使用自定义动画时，它在sidenav控件之外工作正常，但它在sidenav控件内不起作用。

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

https://plnkr.co/edit/pbW2BpMzQzFe792DTUwv?p=preview
（注意：如果你看看这个plunker，你会很容易地知道问题出在哪里。最后一个列表应该可以正常工作。< strong>所有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' })),
     ])
   ])
  ]

问题似乎很简单，但我无法弄明白。非常感谢帮助！

Answer 1

我认为问题出现在div元素中，您的动画与其子元素同时进入HTML DOM，因此它们不会被动画化 - :enter事件不会发生。要绕过它，您可以异步分配items数组（plunker）：

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

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

1 个答案: