Angular animation works in browser but not in device

Ionic Framework ionic-v3
1

Angular animation works on browser as expected but does not work comletely on device.

here’s the code:

@Component({
	selector: 'page-samplelist',
	templateUrl: 'samplelist.html',
	animations: [
		trigger('itemState', [
			state('inactive', style({
				backgroundColor: '#eee',
				transform: 'scale(1) rotate(0deg)'
			})),
			state('active',   style({
				backgroundColor: '#cfd8dc',
				transform: 'scale(1.1) rotate(360deg)'
			})),
			transition('inactive => active', animate('200ms ease-in')),
			transition('active => inactive', animate('200ms ease-out'))
		])
	]
	  
})

constructor(public navCtrl: NavController, public navParams: NavParams) {
		this.my_list = [
			{
				title: "This is title of item 1",
				desc: "This is description of 1",
				state: "inactive",
				toggleState: function() {
					if(this.state == "inactive")
						this.state = "active";
					else
						this.state = "inactive";
				}
			},
			{
				title: "This is title of item 2",
				desc: "This is description of 2",
				state: "inactive",
				toggleState: function() {
					if(this.state == "inactive")
						this.state = "active";
					else
						this.state = "inactive";
				}
			}
		];
}

HTML:

	<ion-item *ngFor="let item of my_list" [@itemState]="item.state" (click)="item.toggleState()" >
		<h2>{{item.title}}</h2>
		<p>{{item.desc}}</p>
	</ion-item>

in browser color changes and transfroms.
in device, only color changes but does not transform.

1 Like
2

Well that was because my Android device version is 4.4.2 (KitKat)
and KitKat’s default browser does not support CSS3.
So it works on newer versions of android devices.

Workaround:
Install CROSSWALK!

2 Likes
3

I’m working on this now too.

It looks like it needs a little different configuration than Angular 4 app.

Mine is completely not working on browser either… it shows me white screen whenever i put that [@trigger]="animationname" on html