ionic 3 angular animation on show hide

Question

i am using ionic 3 angular for a web site. and there are 2 small dots that changes the entire view from view 1 to view 2. Basically to do that i am simply doing a show hide of ion-row using *ngIf like below

<ion-grid>
    <ion-row>
        <ion-col>
            <button ion-button (click)="switchView('view1')">View1</button>
            <button ion-button (click)="switchView('view2')">View2</button>
        </ion-col>
    </ion-row>
    <ion-row *ngIf="currentView == 'view1'">
    ...
    </ion-row>
    <ion-row *ngIf="currentView == 'view2'">
    ...
    </ion-row>
</ion-grid>

But the overall transition is very snappy. I want show it as a sliding effect when i click on buttons to go from view 1 to view 2. please advise.

I think ionic and angular both have some sort of animation capabilities but i am not sure which one is right one in this case and how to use it.

I believe this could help you https://angular.io/guide/animations#example-entering-and-leaving — Nitishkumar Singh, Sep 20 '17 at 19:20

Muhammad Omar ElShourbagy · Answer 1 · 2018-01-09T12:04:01.910

You can have this using the animations available for component class like this answer

@Component({
  animations: [
    trigger(
      'myAnimation',
      [
        transition(':enter',
          [style({ transform: 'translateX(100%)', opacity: 0 }),
          animate('500ms', style({ transform: 'translateX(0)', 'opacity': 1 }))]),
        transition(':leave',
          [style({ transform: 'translateX(0)', 'opacity': 1 }),
          animate('500ms', style({ transform: 'translateX(100%)', 'opacity': 0 }))])
      ])]
})

then in your HTML use the attribute

<ion-row *ngIf="currentView == 'view1'" [@myAnimation]>

ionic 3 angular animation on show hide

1 Answers1