Angular -Анимация (ioni c) - просыпается в первый раз, но не в следующий раз - PullRequest
Новая
       5

Angular -Анимация (ioni c) - просыпается в первый раз, но не в следующий раз

0 голосов
/ 16 января 2020

В моем приложении Ioni c у меня проблема с Angular Анимациями. У меня есть список элементов, и я хочу показать каждый элемент один за другим, когда я показываю страницу.

-> HTML: 

<ion-list @flyInOut @delay *ngFor="let question of typeDouleur" (@delay.done)="doNext()">
<ion-card>
  <div class="head-card">
    <p>{{question.titre}}</p>
  </div>
</ion-card>

-> ts file 

...
animations: [
    trigger('flyInOut', [
      state('in', style({transform: 'translateX(0)'})),
      transition('void => *', [
        style({opacity:0, transform: 'translateX(-150%)'}),
        animate('400ms 0ms ease-out', style({ transform: 'translateX(0%)', opacity: 1}))
      ])
    ]),
    trigger('delay', [
      transition('void => *', [
        animate('200ms')
      ])
    ])
  ]

...
async ionViewWillEnter(){
    this.time=new Date().getTime();
    this.typeDouleur=await [];
    this.next=await 0;
    if(this.listDouleur.length==0){
      await this.traitementService.getQuestions();
      this.listDouleur = await this.traitementService.getQuestions();;
    }

    await this.doNext();
  }

doNext() {
    if(this.next < this.listDouleur.length) {
      this.typeDouleur.push(this.listDouleur[this.next++]);
      let t = new Date().getTime()
      console.log(this.next + " - " + (t-this.time));
    }
  }

этот код работает впервые, когда мы попадаем на страницу, элементы отображаются один за другим с правильными временными интервалами между каждым появлением. Инициализация в функции ionViewWillEnter позволяет каждый раз перезапускать дисплей. Но когда мы возвращаемся на страницу во второй раз, анимация больше не работает. Если у кого-то есть идея ...

, анимация flyInOut позволяет прибыть слева, а анимация delay позволяет мне использовать @flyInOut.done, чтобы запустить анимацию для следующего элемента, не дожидаясь предыдущий до фини sh (400 мс для flyInOut и 100 мс для задержки).

Анимация моего приложения

...