javascript - 过渡延迟 Angular 为4,使用ngFor

标签 javascript angular animation angular-animations

我正在尝试对ngFor中的每个项目进行延迟转换。

每个项目必须在上一个项目之后几毫秒进行动画处理。

这是我的组件代码:

@Component({
    selector: 'bookmark-list',
    templateUrl: './bookmark.list.component.html',
    providers: [BookmarkService],
    styleUrls: ['./bookmark.list.component.less'],
    animations: [
        trigger('myAwesomeAnimation', [
            transition(':enter', [
                style({transform: 'scale(0.8)',}),
                animate('1.5s ease-out', style({transform: 'scale(1)',})),
            ]),
        ])
    ]
})

及其html标记:
<div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let bookmark of bookmarks | bookmarkPipe:search">
  <div [@myAwesomeAnimation]='"large"'>
    <bookmark-item [bookmark]="bookmark"></bookmark-item>
  </div>
</div>

有没有一种方法可以将延迟作为 Angular 转换的论据?

编辑

根据Oluwafemi Sule的回答,交错是解决方案:
    transition('* => *', [
        query(':leave', [
          stagger(
            100, [
              animate('0s ease-in-out', style({
                transform: 'scale(0.8)'
              }))
            ]
          )
        ], {optional: true}),
        query(':enter', [
          style({
            transform: 'scale(0.8)',
          }),
          stagger(100, [
            animate('0.5s 0.7s ease-in-out', style({
              transform: 'scale(1)',
            }))
          ])
        ], {optional: true})
      ])

过渡必须得到改善,但可以做到。

和HTML标记:
<section class="row" [@myAwesomeAnimation]='bookmarks.length'>
    <div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let bookmark of bookmarks | bookmarkPipe:search">
      <bookmark-item [bookmark]="bookmark"></bookmark-item>
    </div>
  </section>

最佳答案

您可以在持续时间之后通过延迟。

animate('1.5s delay ease-out', style({transform: 'scale(1)',})),

您需要计算列表中每个项目的延迟,以实现平稳过渡。

为了延迟每个项目,您将需要升级到4.2.0–4.3.2 版本中的 Angular版本,以使用实验性 stagger动画功能。
trigger('myAwesomeAnimation', [
  transition(':enter', [
    query(':leave', [
      style({transform: 'scale(0.8)',}),
      stagger(100, [
        animate('1.5s ease-out', style({transform: 'scale(1)',})),
      ])
    ]),
    ...
  ]),
])

引用:
  • https://angular.io/guide/animations#delay
  • https://angular.io/api/animations/stagger
  • https://github.com/matsko/ng4-animations-preview
  • 关于javascript - 过渡延迟 Angular 为4,使用ngFor,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45360306/

    相关文章:

    javascript - 如何有效地在ES6 JavaScript中导出多个类?

    javascript - 使用 iOS 返回按钮阻止表单提交

    css - 使用:host selector vs container div

    javascript - 如何将两个以上参数传递给模态ng2 Bootstrap

    wpf - (WPF) 动画 ListView 项目移动

    jquery - 仅一格滑动动画

    javascript - 如何使用 Angular js 制作线程

    javascript - KnockoutJS - 将输入值链接到数据列表值

    Angular 2 从组件或服务订阅?

    javascript - .动画宽度滚动