Ionic 2 动画在 iOS 设备上不起作用

Posted 2023-03-06

【中文标题】Ionic 2 动画在 iOS 设备上不起作用

【英文标题】：Ionic 2 animations not working on iOS device

【发布时间】：2017-07-12 14:39:20

【问题描述】：

我使用 Ionic 2 侧边菜单创建了一个项目

$ ionic start mySideMenu sidemenu --v2

我只写了一些代码来测试这是否适用于 ios 设备/模拟器。

page1.ts

import  Component, trigger, state, style, transition, animate  from '@angular/core';

import  NavController  from 'ionic-angular';

@Component(
    selector: 'page-page1',
    templateUrl: 'page1.html',
    animations: [
        trigger('buttonState', [
            state('left', style( transform: 'translateX(100px)', backgroundColor: 'red' )),
            state('right', style( transform: 'translateX(0)', backgroundColor: 'blue' )),
            transition('left <=> right', [
                animate('1000ms ease-in-out')
            ])
        ])
    ]
)
export class Page1 

    state: string = 'left';

    constructor(public navCtrl: NavController) 

    

    changeState() 
        this.state = this.state == 'left' ? 'right': 'left';
    

page1.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>

  <button ion-button secondary [@buttonState]="state" (click)="changeState()">Toggle Menu</button>
</ion-content>

现在，在构建应用程序并在模拟器/设备中对其进行测试之后，这里唯一起作用的是颜色和位置的变化。甚至没有移动一个像素。

它适用于安卓设备，不适用于 iOS。我只想使用 Angular 的内置动画。关于如何让它在两个平台上工作的任何想法？谢谢

【参考方案1】：

由于这不是一个 Angular 2 而是一个 Ionic 2 问题，我将引导你我是如何做到的。

只需安装 web-animations-js

$ npm install --save web-animations-js

由于这是 Ionic 2，我们在代码中的某处没有 polyfills.ts。将它放在 main.ts 文件中的更好位置。如果您有更好的想法，请随时发表评论。

main.ts

import 'web-animations-js/web-animations.min';

那你就可以走了。 :)

【参考方案2】：

正如您在他们的documentation 中看到的，iOS 不支持web animations API。

您应该将animations polyfill 添加到您的项目中