我正在使用ionic 2应用程序,并且面临翻转动画的问题。
我想在ion-col上放置一个翻转动画(向左翻转和向右翻转),但是翻转动画有时不起作用。
我指的是链接下方的翻转动画-
参考链接-https://www.joshmorony.com/using-the-web-animations-api-in-ionic-2/
.html代码
<ion-grid>
<ion-row>
<ion-col [@flip]="flipState" col-6
(swipe)="swipeEvent($event)">
</ion-col>
</ion-row>
</ion-grid>
.ts代码
首先设置动画
animations: [
trigger('flip', [
state('flipped', style({
transform: 'rotateY(360deg)',
})),
transition('* => flipped', animate('500ms ease'))
]),
]
})
调用swipeEvent方法时
swipeEvent(ev) {
if ((ev.direction === 2 || ev.direction === 4)) {
this.flipState = 'flipped';
}
}