javascript - Angular 4 Web 动画在 Safari 中重置

Question

我正在为 div 的背景设置动画

(我知道我可以用 css 来做到这一点，但我只是想掌握这个)

它可以在 Chrome 和 FireFox 中运行，并且我已经安装了 polyfill，在 Safari 中它会按应有的方式从透明转换为蓝色，但会重置为透明。

export const NavBg = trigger('NavBgState', [
  state('inActive', style({
    'background-color': 'transparent'
   })),
  state('active', style({
    'background-color': '#080253'
  })),

  transition('inActive <=> active', animate('500ms ease-out'))
]);

正如我所说，在其他浏览器中运行良好，想知道是否有人遇到过类似的问题

Answer 1

通过将“background-color”更改为“backgroundColor”解决了这个问题:

export const NavBg = trigger('NavBgState', [
  state('inActive', style({
    'backgroundColor': 'transparent'
   })),
  state('active', style({
    'backgroundColor': '#080253'
  })),

  transition('inActive <=> active', animate('500ms ease-out'))
]);

现在可以在 Safari 中使用了

希望这对遇到此问题的人有所帮助