firefox - animations - Angular 2 animaciones/transiciones solo trabajando en cromo?

web animations api

Question

Como dice el título, he estado construyendo una aplicación web usando Angular2 y decidí probar el navegador cruzado, solo para encontrar las ingeniosas animaciones que funcionan solo en Chrome. Aquí está el aspecto de uno de mis componentes si eso pudiera hacer alguna diferencia:

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

¿Qué podría estar perdiendo / Qué podría tratar de implementar para tener la funcionalidad de navegador cruzado?

Gracias

Answer 1

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

Las animaciones angulares se crean sobre la API de animaciones web estándar y se ejecutan de forma nativa en navegadores compatibles.

La API de animación web no está bien soportada en este momento. Por favor revisa: http://caniuse.com/#feat=web-animation

Necesitas usar un polyfill para que las animaciones funcionen. Este https://github.com/web-animations/web-animations-js puede ser utilizado.

Answer 2

Debe importar polyfills para admitir Web Animations para estos brwosers.

Agregue estas líneas en su 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`.

Sin embargo, se supone que las animaciones web funcionan con Chrome, Firefox y Opera sin importar este polyfill.