Slide left right transition/animation in ionic 2 | ionic 3 | ionic 4 | angular2 | angular4

Please add below lines in your TS file :

import { Component, trigger, transition, style, animate } from ‘@angular/core’;

@Component({

selector: ‘page-name’,

animations: [

trigger(

‘slideAnimation’, [

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}))

])

]

)

]

})

Add below lines in your template file :

<ion-row [@slideAnimation]>

<ion-col col-12>

My data which will slide left and right

</ion-col>

</ion-row>

If not work in iOS (mobile) follow below steps :

Just install web-animations-js

$ npm install –save web-animations-js
Put below code in your TS file :-

import ‘web-animations-js/web-animations.min’;