Angular 2 animations/transitions only working on c

问题:

As the title says, I've been building a web app using Angular2 and decided to test cross-browser, only to find the nifty animations working only in Chrome. Here is what one of my components looks like if that might make any difference:

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

What might I be missing/What could I try to implement in order to have cross-browser functionality?

Thank you

回答1:

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

Angular animations are built on top of the standard Web Animations API and they run natively on browsers that support it.

The Web Animation API is not well supported right now. Please check: http://caniuse.com/#feat=web-animation

You need to use a polyfill to get the animations working. This one https://github.com/web-animations/web-animations-js can be used.

回答2:

You need to import polyfills to support Web Animations for these brwosers.

Add these lines in your 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`.

However, web animations are supposed to work with Chrome, Firefox and Opera without importing this polyfill.