Angular 2 animacje/przejścia działa tylko na chrome?

Question

Jak mówi tytuł, budowałem aplikację internetową przy użyciu Angular2 i postanowiłem przetestować przeglądarkę, aby znaleźć fajne animacje działające tylko w Chrome. Oto co jeden z moich elementów wygląda jeśli może to żadnej różnicy:

@Component({ 
 
    selector: 'contact', 
 
    templateUrl: 'app/about.component.html', 
 
    styleUrls: ['app/about.component.css'], 
 
    
 
    host: { 
 
    '[@routeAnimation]': 'true', 
 
    '[style.position]': "'absolute'", 
 
    '[style.margin]':"'auto'", 
 
    '[style.text-align]':"'center'", 
 
    '[style.width]':"'100%'", 
 
    '[style.display]':"'block'" 
 

 
     
 
    
 
    }, 
 
    animations: [ 
 
    trigger('routeAnimation', [ 
 
     state('*', style({transform:   'translateX(0)', opacity: 1})), 
 
     transition('void => *', [ 
 
     style({transform: 'translateX(100%)', opacity: 0}), 
 
     animate(500) 
 
     ]), 
 
     transition('* => void', animate(500, style({transform: 'translateX(100%)', opacity: 0}))) 
 
    ]) 
 
    ], 
 
\t 
 
})

Co mogę być brakujące/Co mogę starać się wdrożyć w celu uzyskania funkcjonalności różnych przeglądarkach?

Dziękuję

Answer 1

From „https://angular.io/docs/ts/latest/guide/animations.html”:

kątowe animacje są zbudowane na szczycie standardowego Animacje Web API i uruchomić natywnie na przeglądarkach, które go obsługują.

Interfejs API Web Animation nie jest w tej chwili obsługiwany. Proszę sprawdzić: http://caniuse.com/#feat=web-animation

Aby animacje działały, musisz użyć funkcji polyfill. Ten jeden może być użyty jako https://github.com/web-animations/web-animations-js.

Answer 2

Musisz zaimportować polyfills, aby obsługiwać animacje internetowe dla tych brokerów.

Dodaj te linie w swoim src/polyfills.ts:

/** 
* Required to support Web Animations `@angular/animation`. 
* Needed for: All but Chrome, Firefox and Opera. 
    http://caniuse.com/#feat=web-animation 
**/ 
import 'web-animations-js'; // Run `npm install --save web-animations-js`. 

Jednak animacje internetowe mają pracować z Chrome, Firefox i Opera bez importowania tego PolyFill.