Question

我有一个采用ng样式的元素，但是样式对象更改时，样式并非总是按预期应用。我专门指的是下面的css animation，但是我看到了background的类似行为。

<div [ngStyle]="_innerStyle">

export class WidgetContainerComponent implements OnInit {
  _innerStyle?: {
    [klass: string]: any;
  } | null;
...
}

例如_innerStyle是

animation: "flash"
animation-duration: "1s"
animation-iteration-count: "infinite"
background-color: "#ffffff"
box-shadow: "0px 2px 1px -1px rgba(0,0,0,.2), 0px 1px 1px 0px rgba(0,0,0,.14), 0px 1px 3px 0px rgba(0,0,0,.12)"
color: "#199719"

在DOM中产生的结果

animation: 1s ease 0s infinite normal none running flash;

并更改为

animation: "rubberBand"
animation-duration: "1s"
animation-iteration-count: "infinite"
background-color: "#b53b3b"
box-shadow: "0px 2px 1px -1px rgba(0,0,0,.2), 0px 1px 1px 0px rgba(0,0,0,.14), 0px 1px 3px 0px rgba(0,0,0,.12)"
color: "#199719"

在DOM中产生的结果

0s ease 0s infinite normal none running flash

为什么突然将animation-duration设置为0s？我正在打印JSON对象，它没有0s，它有1s。

即使更奇怪，如果animation-duration的值不同，它们是否可以正确地应用于更改？例如：1s至2s而非1s至1s

我希望dom样式能够准确反映样式对象。难道我做错了什么？！有没有办法调试ngStyles行为？

Answer 1

我认为这可能与更改检测有关，因为_innerStyle的引用（在内存中的位置）没有更改，因此Angular并未启用更改检测。

每次_innerStyle在您的TypeScript / JavaScript中进行更改时，请尝试像这样一成不变地对其进行更新：

this._innerStyle = {
   ...this._innerStyle, // keep all of the old properties (spread operator)
  color: 'red',         // change the properties here though
  'background-color': red,
};

Answer 2

我意识到animation是一个简写属性。
我真的想使用animation-name。

如果要使用animation作为css属性，则需要构建简写值。

通过使用各个动画属性，可以正确应用动画，并且不会被animation速记属性覆盖。

NGStyle的更改并不总是能反映出来

2 个答案: