正如标题所示，我一直在使用 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})))
])
],
})
我可能会缺少什么/我可以尝试实现什么以获得跨浏览器功能？
谢谢
From 'https://angular.io/docs/ts/latest/guide/animations.html https://angular.io/docs/ts/latest/guide/animations.html':
角度动画构建在标准 Web 动画 API 之上
它们在支持它的浏览器上本地运行。
Web Animation API 目前还没有得到很好的支持。请检查：http://caniuse.com/#feat=web-animation http://caniuse.com/#feat=web-animation
您需要使用 polyfill 才能使动画正常工作。这个https://github.com/web-animations/web-animations-js https://github.com/web-animations/web-animations-js可以使用。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
