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.