角度动画：找不到查询

Posted 2021-03-28

我正在学习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>

答案

在你的模板中设置动画就像这样[@topListAnimation]

淡出的示例动画

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

我会像我这样在我的控制器中导入它

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

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