CODEWITHSUNDEEP
angularanimationionic3
Vik
Vik

Reputation: 9289

ionic 3 angular animation on show hide

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.

Upvotes: 1

Views: 3144

Answers (1)

Muhammad Omar ElShourbagy
Muhammad Omar ElShourbagy

Reputation: 7068

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]>

Upvotes: 2

Related Questions