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

时间:2018-11-05 08:29:11

标签: animation ionic-framework ionic2

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

1 个答案:

答案 0 :(得分:0)

在GitHub上尝试一下。这是我用作起点的那个

https://github.com/JesseSoldat/Flip-Card-Ionic-2.git