2017-02-22 23 views
5

पर काम नहीं कर मैं सिर्फ अगर यह iOS डिवाइस/सिम्युलेटर में काम करता है परीक्षण करने के लिए आयोनिक 2 sidemenuआयोनिक 2 एनिमेशन IOS डिवाइस

$ ionic start mySideMenu sidemenu --v2 

का उपयोग कर मैं केवल कुछ कोड नीचे लिखा प्रोजेक्ट बनाया हुआ है।

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> 

अब, एप्लिकेशन बनाने और सिम्युलेटर/डिवाइस में परीक्षण के बाद, केवल एक चीज यहां काम किया रंग की बदलती है और पद। यहां तक ​​कि एक पिक्सेल भी नहीं चलाया गया था।

यह एंड्रॉइड डिवाइस पर काम करता है और आईओएस पर नहीं। मैं केवल कोणीय द्वारा अंतर्निहित एनिमेशन का उपयोग करना चाहता हूं। इस पर कोई विचार है कि मैं इसे दोनों मंचों पर कैसे काम कर सकता हूं? धन्यवाद enter image description here

उत्तर

11

करने के लिए animations polyfill जोड़ना चाहिए चूंकि यह एक कोणीय 2 नहीं है, लेकिन एक ईओण 2 सवाल है, मैं तुम्हें नेतृत्व करेंगे कैसे मैंने किया।

बस स्थापित वेब एनिमेशन-js

$ npm install --save web-animations-js 

के बाद से इस आयोनिक 2 है, हमारे पास नहीं है polyfills.ts कोड में कहीं। इसे रखने के लिए बेहतर जगह main.ts फ़ाइल में है। यदि आपके पास बेहतर विचार है तो टिप्पणी करने के लिए स्वतंत्र महसूस करें।

main.ts

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

तो फिर तुम जाने के लिए अच्छे हैं। :) enter image description here

संबंधित मुद्दे