角度2のアニメーション/トランジションはクロームでのみ動作しますか？

Question

タイトルで言うように、私はAngular2を使ってWebアプリケーションを構築していましたが、クロスブラウザをテストすることに決めました。ここではそれがすべての違いを生む可能性がある場合、私のコンポーネントの一つは次のようになります。

@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 
 
})

私が欠落している可能性があります/私は、クロスブラウザの機能を持たせるために実装しようとすることができますか？

は「https://angular.io/docs/ts/latest/guide/animations.html」からあなた

Answer 1

ありがとう：

角度アニメーションは、標準的なWebアニメーションAPI の上に構築されており、彼らはそれをサポートするブラウザ上でネイティブに実行されます。

現在、WebアニメーションAPIはうまくサポートされていません。確認してください：http://caniuse.com/#feat=web-animation

アニメーションを機能させるには、ポリフィルを使用する必要があります。この1つはhttps://github.com/web-animations/web-animations-jsです。

Answer 2

これらのbrwoserのWebアニメーションをサポートするには、ポリフィルをインポートする必要があります。

はあなた の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`. 

はしかし、ウェブアニメーションは、このポリフィルをインポートせずにクロム、FirefoxとOperaので動作するようになっています。