如何使用Angular Animation Builder设置多个对象的动画？

Question

我正在尝试使用Angular Animation Builder来滑动我的导航，并为模态蒙版的不透明度设置动画，以便在导航打开时背景淡化为黑色。我的问题是动画仅应用于导航而不是模式蒙版，因此我的导航可以滑入和滑出以及淡入和淡出。

无论我进行什么更改，动画都只会影响导航，而不会影响模式蒙版。我查看了Animation Builder的文档以及Google上的示例，但是找不到如何将多个项目传递给动画生成器的示例。我知道我可以在组件中使用animations数组，但是我更喜欢Animation Builder的功能方法。

如何使用“动画生成器”为多个属性设置动画？

// navigation.component.html
    <article
        class="modal__mask"
        #fadeIn
        *ngIf="!!isNavOpen">
    </article>
    <div
        class="nav__container"
        #slideIn>

// navigation.component.ts
@ViewChild('slideIn') private slideIn: ElementRef;
@ViewChild('fadeIn') private fadeIn: ElementRef;
private player: AnimationPlayer;
timing: string = '500ms ease-in';
isNavOpen: boolean = false;

private buildAnimation( offset, opacity ) {
    return this.builder.build([
        animate(this.timing, style({ transform: `translateX(-${offset}px)`, opacity: `opacity` }))
    ]);
}
openNav() {
    this.isNavOpen = true;

    const myAnimation : AnimationFactory = this.buildAnimation(0, 1);
    this.player = myAnimation.create(this.slideIn.nativeElement, this.fadeIn.nativeElement);
    this.player.play();

}

closeNav() {
    this.isNavOpen = false;

    const myAnimation : AnimationFactory = this.buildAnimation(30, 0);
    this.player = myAnimation.create(this.slideIn.nativeElement, this.fadeIn.nativeElement);
    this.player.play();

}