Question

在我的Ionic应用程序中，我遇到了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文件

...
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来启动下一个项目的动画，而无需等待上一个项目的完成（ flyInOut为400毫秒，延迟为100毫秒。

Animation of my app

Angular-Animation（离子性）-第一次唤醒，但下次不唤醒

0 个答案: