Как использовать метод sequence () Angular animations для запуска анимации только после ее завершения? - PullRequest
Новая
       19

Как использовать метод sequence () Angular animations для запуска анимации только после ее завершения?

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

У меня есть два элемента на странице, которые я хочу анимировать последовательно. 

1. h1 tag
2. the background image

HTML-шаблон моего компонента выглядит следующим образом: 

`<div class="container">
  <h1 [@flyInOut]="isIn ? 'in' : 'out'"  class="welcome-title">WELCOME</h1>
</div>
<div [@flyInOut]="isIn ? 'in' : 'out'"  class="background">  <div class="gradient">
    <div class="container">
        <div style="height: 350px;"></div>        
    </div>    
  </div>
</div>`

У меня есть следующая анимация: 

`animations: [
    trigger('flyInOut', [
      state('in', style({ transform: 'translateX(0)'})),
      transition(':enter', [
        style({
          transform: 'translateY(-3%)',
          opacity: 0,
          position: 'static'
        }),
        sequence([          
          animate(
            '3.5s ease-in-out',
            keyframes([
              style({ transform: 'translateY(50%)', opacity: 0 }),
              style({ transform: 'translateY(0%)', opacity: 1 }),
            ])
          ),
          animate('2.5s .2s ease-in', keyframes([
            style({ opacity: .0, offset: .2 }),
            style({ opacity: .2, offset: .6 }),
            style({ opacity: .4, offset: .8 }),
            style({ opacity: .99, offset: 1 })
          ]))
        ])  
      ])
    ]),`

Все, что я хочу сделать, - это просто запустить первую функцию animate, только затем запустить вторую функцию animate.Согласно угловым документам, я должен быть в состоянии сделать это с помощью метода sequence, но это не так.

Я вижу, что данный код будет выполнять обе анимации параллельно, и как только он получитЗакончив делать первую анимацию, он запустит вторую анимацию.

У меня такое чувство, что я использую анимацию в шаблоне HTML.Любые рекомендации?

1 Ответ

1 голос
/ 09 апреля 2019

Вы можете использовать Анимационные обратные вызовы .

Просто добавьте в свой h1 тег

<h1 [@flyInOut]="isIn ? 'in' : 'out'" (@flyInOut.done)="animationDone($event)" class="welcome-title">WELCOME</h1>

и для div используйте новый флаг, например ::

<div [@flyInOut]="isDivIn ? 'in' : 'out'" class="background"> <div class="gradient">

, который вы можете установить на true в функции animationDone:

animationDone(event: AnimationEvent) { this.isDivIn = true; //or false, depends on your specific logic }

поэтому, как только анимация h1 будет завершена, ваш флаг (isDivIn) будет установлен как true, и анимация div начнется.

...