从angular 2组件修改CSS关键帧

我有一个用颜色填充表格单元格的动画。我希望动画关键帧

到.width

是一个由角度2组件控制的变量

CSS:

HTML:

---

[style.width.%]

工作正常，但我想做如上所述的事情来动态设置每个单元格的动画宽度，但我不确定如何访问该属性。

我可以通过删除CSS中的

to

声明并在视图中使用

[ngStyle]

设置值来解决这个问题

新CSS：

#passing {
  display: block;
  height: 100%;
  background-color: #81C784;
  animation-duration: 2s;
  animation-name: slideright;
}

@keyframes slideright {
  from {
    margin-right: 0%;
    width: 0%;
  }
}

新HTML：

<div id="passing"
     [style.width.%]="cells[id].width"
     [ngStyle]="{'to': cells[id].width}">
</div>

---

这是一个基于CSS变量的解决方案，通过

@HostBinding

动态更新

CSS声明几乎保持不变，但使用CSS变量确定关键帧的目标宽度（可选默认值为

50%

）

要更新

--目标宽度
的值，请在角度分量中添加一个变量，并用以下内容对其进行注释：

这将把CSS变量添加到组件宿主元素中。由于CSS变量层叠而下，您可以在宿主组件模板样式中的任何位置使用它

您现在可以使用该成员在运行时更新CSS变量并为其分配任何值

旁注：


请注意，
camelCase
属性的绑定将转换为
camelCase
根据此方法，此方法仅适用于角度9+
angular如何理解规则所指的关键帧？一个元素可以有不同的关键帧。听起来像是对meCSS变量和Angular 9+allow cleaner解决方案的攻击@克里斯蒂安娜看看我的答案：每次变量更新时，动画都会更新吗？
#passing {
  display: block;
  height: 100%;
  background-color: #81C784;
  animation-duration: 2s;
  animation-name: slideright;
}

@keyframes slideright {
  from {
    margin-right: 0%;
    width: 0%;
  }
}

<div id="passing"
     [style.width.%]="cells[id].width"
     [ngStyle]="{'to': cells[id].width}">
</div>

#passing {
  display: block;
  height: 100%;
  background-color: #81C784;
  animation-duration: 2s;
  animation-name: slideright;
}

@keyframes slideright {
  from {
    margin-right: 0%;
    width: 0%;
  }
  to {
    margin-right: 50%;
    width: var(--target-width, 50%);
  }
}

@HostBinding('style.--target-width')
private targetWidth: string = '60%';