Animations don't work on ionic v4 components

@schngrg wrote:

(I have also created a github issue on this: https://github.com/ionic-team/ionic/issues/19536)

Animation when applied to a simple div works OK. But same animation is janky/choppy when applied to a div containing ion-button. And it doesn’t animate at all when applied to div containing ion-grid.

Sample angular animation:

  animations: [
    trigger('panelInOut', [
      transition(':enter', [
        style({ height: '0px', opacity: 0, overflow: 'hidden' }),
        animate('2s ease-in', style({ height: '*', opacity: 1, overflow: 'hidden' }))
      ]),
      transition(':leave', [
        style({ height: '*', opacity: 1, overflow: 'hidden' }),
        animate('2s ease-out', style({ height: '0px', opacity: 0, overflow: 'hidden' }))
      ])
    ])
  ]

 
 
1) With simple div, animation works OK:

  <div class="row" style="background:chocolate" (click)="case3.show = !case3.show">
    <b>{{case3.name}}</b>
  </div>
  <div *ngIf="case3.show" [@panelInOut]>
    <div style="background:green; width:100%">
      <div *ngFor="let a of case3.courseid" class="row">
        <div>{{a}}</div><br>
      </div>
    </div>
  </div>

div animation on youtube:

 
 
2) With ion-buttons, janky/choppy animation:

  <div class="row" style="background:chocolate" (click)="case2.show = !case2.show">
    <b>{{case2.name}}</b>
  </div>
  <div *ngIf="case2.show" [@panelInOut]>
    <div style="background:green; width:100%">
      <div *ngFor="let a of case2.courseid" class="row">
        <ion-button>{{a}}</ion-button><br>
      </div>
    </div>
  </div>

ion-button animation on youtube:

 
 
3) With ion-grid, animation doesn’t work at all:

  <div class="row" style="background:chocolate" (click)="case1.show = !case1.show">
    <b>{{case1.name}}</b>
  </div>
  <div *ngIf="case1.show" [@panelInOut]>
    <ion-grid style="background:green; width:100%">
      <ion-row *ngFor="let a of case1.courseid" class="row">
        <ion-col>
          {{a}}
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

ion-grid animation on youtube:

(GitHub issue on this has a sample project to reproduce this: https://github.com/ionic-team/ionic/issues/19536)

Posts: 1

Participants: 1

Read full topic