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

Question

正如标题所说,我一直在使用Angular2构建一个Web应用程序,并决定测试跨浏览器,只是为了找到仅在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 ':

角度动画构建在标准Web动画API之上,它们在支持它的浏览器上本机运行.

Web Animation API目前尚未得到很好的支持.请检查:http://caniuse.com/#feat=web-animation

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