Обратные вызовы анимации запускаются немедленно, даже без изменения состояния - PullRequest
Новая
       52

Обратные вызовы анимации запускаются немедленно, даже без изменения состояния

0 голосов
/ 06 мая 2020

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

Шаблон 

<button (click)="click()">click</button>
<div class="myclass" [@throwBall]="state" (@throwBall.start)="animStart($event)" >  
</div>

Компонент: 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('throwBall', [
      state('steady', style({ })),
      state('throw', style({ top: '300px' })),
      transition('steady => throw', [animate('2s')])
    ]),
    trigger('blockInitialRenderAnimation', [
        transition(':enter', [])
    ])
  ]
})
export class AppComponent  {
  state = 'steady';

  click() {
    this.state = 'throw';
  }
  animStart(event: any) {
    if (event.fromState !== 'void') {
      console.log('anim start callback');
    }
  }
}

Вот демонстрация : https://stackblitz.com/edit/angular-9szgic

Почему при загрузке компонента в консоли отображается «обратный вызов анимации запуска»?

1 Ответ

1 голос
/ 06 мая 2020

Начальное состояние анимации - это состояние без состояния, называемое void, которое является состоянием по умолчанию при использовании анимации. После инициализации переменной state значением steady несуществующая анимация начинается с void -> steady.

Для достижения своей цели вы должны использовать свойства fromState & toState из AnimationEvent . 

import { AnimationEvent, } from '@angular/animations';

public animStart(event: AnimationEvent): void {
   if(event.fromState === 'steady') {
      // ...
   }
}

Попробуйте записать AnimationEvent в свой метод animStart, чтобы лучше понять это interface. 

public animStart(event: AnimationEvent): void {
   console.log(event);
}
...