Angular 2 管道事件答案

【问题标题】：Angular 2 Pipe EventsAngular 2 管道事件
【发布时间】：2017-12-20 22:08:46
【问题描述】：

我创建了一个自定义 Angular 2 管道来根据对象内部的 ID 属性过滤数组。我只是想知道管道存在哪些事件（如果有），因为我想在过滤后的数据通过管道时添加动画。

【问题讨论】：

【解决方案1】：

是的，有一些事件可以为过滤后的数据设置动画。您确实有 :enter 和 :leave 可以应用 CSS 样式。

这是一个示例。

@Component({
  selector: 'app-selector',
  templateUrl: './templateFile.component.html',
  styleUrls: ['./stylesFile.component.scss'],
  animations: [
    trigger('aliasesAnimation', [
      transition('* => *', [
        query(':enter', style({opacity: 0}), {optional: true}),
        query(':enter', stagger('50ms', [
          animate('250ms ease-in', keyframes([
            style({opacity: 0, transform: 'translateX(-20%)', offset: 0}),
            style({opacity: 0.5, transform: 'translateX(5%)', offset: 0.3}),
            style({opacity: 1, transform: 'translateX(0)', offset: 1.0})
          ]))
        ]), {optional: true}),
        query(':leave', stagger('50ms', [
          animate('250ms ease-in', keyframes([
            style({opacity: 1, transform: 'translateX(0)', offset: 0}),
            style({opacity: 0.5, transform: 'translateX(5%)', offset: 0.3}),
            style({opacity: 0, transform: 'translateX(-20%)', offset: 1.0})
          ]))
        ]), {optional: true})
      ])
    ])
  ]
})

希望对您有所帮助，@T04435

【讨论】：

非常感谢！我似乎在其他任何地方都找不到任何东西！救生员！