Question

正如标题所说，我一直在使用Angular2构建一个网络应用程序，并决定测试跨浏览器，只是为了找到只在Chrome中运行的漂亮动画。如果这可能有所不同，那么我的组件之一就是这样：

＆＃13;

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

＆＃13;

我可能缺少什么？为了拥有跨浏览器功能，我可以尝试实施什么？

谢谢

Answer 1

来自＆＃39; https://angular.io/docs/ts/latest/guide/animations.html＆＃39;：

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

目前还没有很好地支持Web动画API。请检查：http://caniuse.com/#feat=web-animation

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

Answer 2

您需要导入polyfill以支持这些brwosers的Web动画。

在 src / polyfills.ts ：

中添加这些行

/**
 * Required to support Web Animations `@angular/animation`.
 * Needed for: All but Chrome, Firefox and Opera. 
   http://caniuse.com/#feat=web-animation
**/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

但是，网络动画应该可以与Chrome，Firefox和Opera一起使用，而无需导入此polyfill。

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

2 个答案: