小编Ben*_*iah的帖子

Angular 2动画/过渡仅适用于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)
      ]),
      transition('* => void', animate(500, style({transform: 'translateX(100%)', opacity: 0})))
    ])
  ],
	  
})
Run Code Online (Sandbox Code Playgroud)

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

谢谢

firefox animation transition cross-browser angular

5
推荐指数
1
解决办法
4394
查看次数

标签 统计

angular ×1

animation ×1

cross-browser ×1

firefox ×1

transition ×1