Question

有没有办法在Angular动画中使用-webkit关键帧？我已经定义了这样的模糊触发器：

export const blurAnimation =

trigger('blur', [
  transition('1 => 0', [
    animate('500ms ease-in', keyframes([

      style({
        filter: 'blur(5px)',
        // webkitFilter: 'blur(5px)' // NOT WORKING
      }),

      style({
        filter: 'blur(0)',
        // WebkitFilter: 'blur(0)' // NOT WORKING
    })
  ]))
])

简单模糊有效，但Safari需要--webkit-filter。

Answer 1

将网络动画安装为

npm install 'web-animations-js'

然后将其添加到polyfills.ts：

import 'web-animations-js';

Angular动画指南提到

对于其他浏览器，需要使用polyfill。抓取web-animations.min.js 从这里并将其添加到您的页面

您无需在代码中添加webkitfilter，过滤器应该可以很好地与网络动画配合使用。

有关更多信息，您可以阅读https://github.com/angular/angular/issues/10420

角度动画：WebKit支持

1 个答案: