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

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