İyonik 2 animasyonlar Bu iOS cihaz/simülatörü İnşaat eğer sadece test etmek sadece birkaç kodları not aldığınız <pre><code>$ ionic start mySideMenu sidemenu --v2 </code></pre> <p>İyonik 2 sidemenu</p> kullanarak bir proje oluşturduk iOS cihaza

Question

çalışmıyor. Şimdi

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'; 
    } 
} 

<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> 

page1.html

, uygulama oluşturup simülatör/aracıyla bunu test ettikten sonra, tek şey burada çalışan rengin değişen ve konumu. Tek bir piksel bile taşınmamış.

iOS'ta değil, Android cihazlarda çalışır. Sadece yerleşik animasyonları Angular ile kullanmak istiyorum. Bununla ilgili her türlü düşünceyi her iki platformda nasıl çalıştırabilirim?

Answer 1

için animations polyfill eklemek gerekir.

Sadece yüklemek web animasyonları-js yerde kodunda bu İon 2 olduğundan

$ npm install --save web-animations-js 

biz yok polyfills.ts. Bunu koymak için daha iyi bir yer, main.ts dosyasındadır. Daha iyi bir fikriniz varsa yorum yapmaktan çekinmeyin.

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

main.ts

Sonra gitmek iyidir. :)

Answer 2

documentation'da görebileceğiniz gibi, web animations API iOS tarafından desteklenmemektedir. Bu bir Eğik 2 değil ama nasıl yaptığımı bir İon 2 soru, seni götürecek yana

Sen projeniz