角2动画/转换只在铬上工作? [英] Angular 2 animations/transitions only working on 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屋!