javascript - Angular 动画: can't find query

Question

我正在学习 Angular 动画，当我单击前 100 个标签并加载页面时，我想使用交错淡入列表项。不幸的是，它说找不到我输入的查询。有人能看到我做错了什么吗？

我的组件中有以下动画代码:

@Component({
    selector: 'app-top100',
    templateUrl: './top100.component.html',
    styleUrls: ['./top100.component.css'],
    animations: [
        trigger('topListAnimation', [
            transition(':enter', [
                query('.list-group-item', [
                    stagger(200, useAnimation(fadeInAnimation))
                ])
            ])
        ])
    ]
})

模板文件

<div @topListAnimation>
    <div class="col-md-8 col-md-offset-2 listDiv">
        <div class="list-group">
            <a
                    [routerLink]="['/movies', movie?._id]"
                    href="#"
                    *ngFor="let movie of movies;
                let i = index"
                    [attr.data-index]="i"
                    class="list-group-item"
            >
                <h3>{{ i+ 1 }}</h3>
                <h3>{{movie?.title}}</h3>
                <span class="glyphicon glyphicon-star"></span>
                <span><h3>{{movie?.averageRating}}</h3></span>
            </a>
        </div>
    </div>
</div>

Answer 1

在模板中设置动画，如下所示 [@topListAnimation]

淡出动画示例

export const FADE_OUT_TRANSITION = [
  trigger('fadeOut',  [
    transition(':leave', animate(700, keyframes([
      style({opacity: 1, offset: 0}),
      style({opacity: 0, offset: 1})
    ])))
  ])
];

我将它导入到我的 Controller 中，就像这样

@Component({
  selector: 'lyx-ghost',
  template: '<div [@fadeOut]>Ghost Busters</div>',
  animations: [...FADE_OUT_TRANSITION]
})
export class GhostComponent {
}

要获得更酷的效果，请查看 animate.css