Angular 6 - Запустить анимацию после первого - PullRequest
Новая
       13

Angular 6 - Запустить анимацию после первого

2 голосов
/ 14 мая 2019

Используя Angular 6, у меня есть 4 перехода / шага, которые я хотел бы совершить:

  1. С помощью ng, если отобразится div 1 (с кнопками), сдвиньте вверх
  2. Кнопка отправки будет менять цвет слева направо, это таймер, в котором у пользователя есть 10 секунд, чтобы щелкнуть, пока он не нажмет автоматически, устанавливает bool 'submit' в true
  3. Div 1 соскользнет с экрана
  4. Div 2 будет скользить вверх (также используя ngIf)

У меня есть код для моих переходов, но я хотел бы заставить их ждать перед выполнением следующего

Является ли использование stagger единственным разумным способом для достижения этой цели? то есть - https://angular.io/api/animations/stagger

Вот что у меня есть, чтобы изменить цвет моей кнопки слева направо через 10 секунд, а другой - для перемещения div вверх и вниз 

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  animations: [
    trigger('changeButtonColor', [
      state('initial', style({
        'background-position': 'right bottom'
      })),
      transition('initial=>final', animate('10000ms'))
    ]),
    trigger('showSubmitButtons', [
      transition(':enter', [
        style({transform: 'translateY(100%)'}),
        animate(1500, style({transform: 'translateY(0%)'}))
      ]),
      transition(':leave', [
        animate(1500, style({transform: 'translateY(100%)'}))
      ])
    ]),
  ]
})

А вот краткий HTML-фрагмент: 

    <div class="actionButtons" *ngIf="!submitted" [@showSubmitButtons]>
            <button [@changeButtonColor]=currentState (@changeButtonColor.done)="submitImage()" id="submitBtn" class="submitButton" (click)="submitImage()"><i class="fas fa-check"></i></button>
            <button id="restartBtn" class="myButton" (click)="resetCapture()"><i class="fas fa-redo-alt"></i></button>
    </div>

    <div class="offlineContent" *ngIf="submitted" [@showSubmitButtons]>
        <h1>Thank You!</h1>
        <button id="restartBtn" class="myButton" (click)="resetCapture()"><i class="fas fa-redo-alt"></i></button>
    </div>

** Редактировать - я собрал стек-блиц, он не идеален, но, по крайней мере, я вижу, как мне нужно подождать, особенно после нажатия кнопки «Отправить», хотел бы подождать, пока кнопки полностью не опустятся, пока новый div не скользит вверх.

Мой блиц не показывает его (трудности с переносом кода из моего проекта в небольшой образец), но также хотел бы, чтобы цветовой переход моей кнопки "Отправить" подождал, пока div не увеличился

https://stackblitz.com/edit/angular-8xufpf

...