2 разные анимации не работают вместе на 1 компоненте - PullRequest
Новая
       16

2 разные анимации не работают вместе на 1 компоненте

0 голосов
/ 15 апреля 2019

это мой шаблон компонента 

<nav class="menu" [ngClass]="{ snap: snap }" [@menuBackground]="'normal'">
  <div class="container fluid">
    <div class="row align-items-center">
      <div class="col-2" [@logoZoomOut]="'normal'">
        <img *ngIf="true" src="../../../assets/logo.png" class="logo img-fluid" alt="logo" />
      </div>
      <div
        class="links-wrapper text-right d-none d-md-block col-md-8 offset-md-2 col-lg-6 offset-lg-4 col-xl-5 offset-xl-5"
      >
        <ul>
          <app-menu-link [link]="'/'" [text]="'Home'" [first]="true"></app-menu-link>
          <app-menu-link [link]="'/services'" [text]="'Services'"></app-menu-link>
          <app-menu-link [link]="'/portfolio'" [text]="'Portfolio'"></app-menu-link>
          <app-menu-link [link]="'/contact'" [text]="'Contact'" [contact]="true"></app-menu-link>
        </ul>
      </div>
    </div>
  </div>
</nav>

И это мой код компонента: 

import { Component, OnInit, OnDestroy } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss'],
  animations: [
    trigger('menuBackground', [
      state('normal', style({ background: 'rgba(118, 137, 169, 0.22)' })),
      transition('void => normal', [style({ background: 'none' }), animate('.5s 2s ease-in')])
    ]),
    trigger('logoZoomOut', [
      state('normal', style({ transform: 'scale(1)' })),
      transition('void => normal', [style({ transform: 'scale(1.5)' }), animate('.5s ease-in')])
    ])
  ]
})
export class MenuComponent implements OnInit, OnDestroy {
  public snap = false;

  constructor() {}

  ngOnInit() {
    window.addEventListener('scroll', this.scroll, true);
  }

  ngOnDestroy() {
    window.removeEventListener('scroll', this.scroll, true);
  }

  scroll = (): void => {
    if (window.pageYOffset > 90) {
      this.snap = true;
    } else {
      this.snap = false;
    }
  };
}

А теперь я хочу анимировать как фон навигации, так и размер логотипа.Но проблема в том, что, когда оба menuBackground и logoZoomOut триггеры установлены на nav и div - только фон анимируется и анимация логотипа не воспроизводится.

Когда я удаляю фоновую анимацию - логотипправильно анимирует.

Так как я могу анимировать оба элемента одновременно?Я думал, что это должно работать независимо.У меня также была проблема с анимацией логотипа - она ​​не работала без элемента *ngIf="true" на img.Может это как-то связано?

1 Ответ

0 голосов
/ 15 апреля 2019

Вы можете запустить внутреннюю анимацию, используя animateChild .Если вы хотите запустить обе анимации одновременно, то вам необходимо дополнительно использовать group .

Пример Stackblitz

...