Как я могу анимировать несколько объектов с помощью Angular Animation Builder? - PullRequest
Новая
       63

Как я могу анимировать несколько объектов с помощью Angular Animation Builder?

0 голосов
/ 13 марта 2019

Я пытаюсь использовать Angular Animation Builder, чтобы перемещать навигацию, а также анимировать непрозрачность модальной маски, так что фон становится черным, когда навигация открыта. У меня проблема в том, что анимация применяется только к навигационной панели, а не к модальной маске, поэтому моя навигационная система скользит и исчезает, а также исчезает и исчезает.

Независимо от того, что я изменяю, анимация влияет только на навигацию, а не на модальную маску. Я просмотрел документацию для Animation Builder , а также искал примеры в Google и не могу найти пример того, как передать несколько элементов в построитель анимации. Я знаю, что могу использовать массив animations в своем компоненте, однако я предпочитаю функциональный подход в Animation Builder.

Как анимировать несколько свойств с помощью 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();

}
...