कोणीय 4 एनिमेशन सफारी आईओएस 9.3

Question

के साथ काम नहीं कर रहे हैं मैं वर्तमान में सभी संभावित ब्राउज़रों में अपने ऐप का परीक्षण कर रहा हूं और मुझे यह देखना है कि कोणीय एनिमेशन सफारी आईओएस 9.3 में अपेक्षित व्यवहार नहीं करते हैं। घंटों के बाद और इसे हल करने की कोशिश करने के घंटे मैं हाथ में मदद मांगा। अग्रिम में धन्यवाद।

मेरे कोड पढ़ता है:

package.json

"dependencies": { 
    "@angular/animations": "^4.3.2", 
    "@angular/cdk": "^2.0.0-beta.8", 
    "@angular/common": "^4.0.0", 
    "@angular/compiler": "^4.0.0", 
    "@angular/core": "^4.0.0", 
    "@angular/forms": "^4.0.0", 
    "@angular/http": "^4.0.0", 
    "@angular/material": "^2.0.0-beta.8", 
    "@angular/platform-browser": "^4.0.0", 
    "@angular/platform-browser-dynamic": "^4.0.0", 
    "@angular/router": "^4.0.0", 
    "@ngx-meta/core": "^0.4.0-rc.2", 
    "@ngx-translate/core": "^7.1.0", 
    "@ngx-translate/http-loader": "^1.0.1", 
    "angular2-moment": "^1.6.0", 
    "core-js": "^2.4.1", 
    "express": "^4.15.4", 
    "lodash": "^4.17.4", 
    "ng2-pdf-viewer": "^1.1.1", 
    "ng2-translate": "^5.0.0", 
    "rxjs": "^5.4.1", 
    "web-animations-js": "^2.3.1", 
    "zone.js": "^0.8.14" 
}, 

landing.component.ts

import { Component, HostBinding, ChangeDetectionStrategy } from '@angular/core'; 
import { stateTransition } from '../routing.animations'; 

@Component({ 
    selector: 'cp-landing', 
    templateUrl: './landing.component.html', 
    styleUrls: ['./landing.component.css'], 
    changeDetection: ChangeDetectionStrategy.OnPush, 
    animations: [ stateTransition() ] 
}) 
export class LandingComponent { 
    @HostBinding('@stateTransition') ''; 
} 

routing.animations.ts

import { trigger, state, animate, style, transition } from '@angular/animations'; 

export function stateTransition() { 
    return trigger('stateTransition', [ 
    state('void', style({ 
     transform: 'translateY(50%)', 
     opacity: 0 
    })), 
    state('*', style({ 
     transform: 'translateY(0%)', 
     opacity: 1 
    })), 
    // enter animation 
    transition('void => *', animate('.5s 500ms')), 
    // exit animation 
    transition('* => void', animate('.5s')) 
    ]); 
} 

मैंने एक पहेली के साथ आने की कोशिश की लेकिन मैं त्रुटि को पुन: उत्पन्न करने में सक्षम नहीं हूं।

Answer 1

कर अंत में त्रुटि था काफी भी विशिष्ट, ngx-pdf-viewer पुस्तकालय इस त्रुटि घटक को लोड करने की पल में पैदा कर रहा था।

मैंने इसे हल करने के लिए क्या किया था, जब उपयोगकर्ता डेस्कटॉप में होता है तो मैं गतिशील रूप से घटक को संकलित करना चाहता था और मैंने मोबाइल के लिए एक और दृष्टिकोण लिया।

मेरे कोड:

const template = '<pdf-viewer [src]="src"' + 
       '   [show-all]="true"' + 
       '   [zoom]="2">' + 
       '</pdf-viewer>'; 

const tmpCmp = Component({template: template})(class {}); 
const tmpModule = NgModule({ 
    declarations: [tmpCmp, PdfViewerComponent], 
    imports: [CommonModule]} 
)(class {}); 

this._compiler.compileModuleAndAllComponentsAsync(tmpModule) 
.then((factories) => { 
    const f = factories.componentFactories[0]; 
    const cmpRef = f.create(this._injector, [], null, this._m); 
    cmpRef.instance.src = this.data.src; 
    this.pdfViewerContainer.insert(cmpRef.hostView); 
}); 

Answer 2

कोशिश इस संस्करण

"@angular/animations": "4.0.2" 

Answer 3

वेब एनिमेशन API के साथ अपने पैकेज पदावनति द्वारा Safari पर polyfill की आवश्यकता है, मेरा मानना ​​है कि। और यह डिफ़ॉल्ट रूप से सक्षम नहीं है। आपको केवल पॉलीफिल इंस्टॉल करने की आवश्यकता होगी और फिर अपने ऐप के/src फ़ोल्डर में अपनी polyfills.ts फ़ाइल में एक पंक्ति या दो जोड़ें।

यहाँ देखें: How to add Web Animations API polyfill to an Angular 2 project created with Angular CLI

नए, कोणीय CLI की Webpack संस्करण के साथ जोड़ा जा रहा है polyfill

(नीचे सर्वश्रेष्ठ उत्तर को कॉपी) है आसान: साथ

स्थापित

npm install web-animations-js --save 

polyfills.ts में जोड़ें:

require('web-animations-js/web-animations.min'); 

यह भी काम किया है, तो मैं

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

Answer 4

इस मुद्दे के स्रोत NGX-पीडीएफ-दर्शक है जो गलती से आईओएस के सभी संस्करणों पर वेब एनिमेशन polyfills pdf.js के एक पुराने 1.x संस्करण के आधार पर है (https://github.com/mozilla/pdf.js/blob/6521d2fd941f26a1b7ae9b97f71842e49f5ff241/src/shared/compatibility.js#L571-L575)। यह पुराने आईओएस संस्करणों में एक बग को ठीक करने के लिए किया गया था, लेकिन नए आईओएस संस्करणों का कारण बनता है जिनके पास एक कार्य अनुरोध है, ब्रेक करने के लिए एनीमेशन फ्रेम।