角2动画/转换只在铬上工作？ [英] Angular 2 animations/transitions only working on chrome?

问题描述

正如标题所说，我一直在使用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）]） * => void'，动画（500， （{transform：'translateX（100％）'，opacity：0}）））]），}）

我可能会缺少什么/为了具有跨浏览器功能，我可以尝试实现什么？

谢谢你

解决方案

从 https://angular.io/docs/ts/latest/guide/animations.html ：

角度动画建立在标准的Web动画API
的基础上，并且在支持它的浏览器上运行。

现在Web动画API还不被很好的支持。请检查： http://caniuse.com/#feat=web-animation

您需要使用polyfill来获取动画。这一个 https://github.com/web-animations/web-animations-js可以使用。

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

解决方案

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动画/转换只在铬上工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！