Angular animation works in browser but not in device

@arnoldparge wrote:

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.

Posts: 1

Participants: 1

Read full topic