animation - 左右翻转动画在ionic 2中不起作用

问题描述

我正在使用 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';
}
}

标签： animationionic-frameworkionic2

animation - 左右翻转动画在ionic 2中不起作用

问题描述

解决方案

推荐阅读