如何将动画绑定到内容子项并订阅动画事件？

Question

我正在开发一个采用内部内容的 Angular 组件，并且应该将动画附加到内容子项（例如子元素）。

使用代码如下所示：

<flip-board [frontSide]="'side-2'">
  <flip-side name="side-1">Side 1<flip-side>
  <flip-side name="side-2">Side 2<flip-side>
  <flip-side name="side-3">Side 3<flip-side>
</flip-board>

在FlipBoard组件内部，我需要：

1. 将动画附加到所有FlipSide组件。
2. 收听 的动画事件FlipSide。

在所有文章和教程中，我发现它展示了如何在模板中而不是在组件代码中附加动画和事件。在我的情况下，模板由组件的使用者传递，我需要在组件代码中动态分配动画和订阅动画事件。

@Component({
  selector: 'flip-board',
  template: '<ng-content></ng-content>',
})
export class FlipBoard {
  @ContentChildren(FlipSide) sides: QueryList<FlipSide>;

  ngAfterContentInit() {
    // TODO: 1. Attach animations to this.sides
    // TODO: 2. Subscribe to animation events of this.sides
  }
}

是否可以？

Answer 1

关于内容元素动画绑定，您可以尝试将动画触发器绑定到父元素。然后，“query()”功能允许您通过 CSS 选择器等对元素进行动画处理。

例如，请查看这篇文章： A New Wave of Animation Features in Angular