firefox - Angular 2 动画/过渡仅适用于 chrome？

Question

正如标题所说，我一直在使用 Angular2 构建网络应用程序，并决定测试跨浏览器，结果发现漂亮的动画只能在 Chrome 中运行。这是我的一个组件的样子，如果这可能会有所不同的话:

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

我可能遗漏了什么/我可以尝试实现什么以获得跨浏览器功能？

谢谢

Answer 1

来自 ' 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.

Web Animation API 目前没有得到很好的支持。请查收:http://caniuse.com/#feat=web-animation

您需要使用 polyfill 来使动画正常工作。这个https://github.com/web-animations/web-animations-js可以使用。