Question

我有一个用颜色填充表格单元格的动画。我希望动画关键帧to.width是一个由角度2组件控制的变量。

CSS：

#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: 50%;
  }
}

HTML：

<div id="passing"
     [style.width.%]="cells[id].width"
     [style.keyframes.slideright.to.width.%]="cells[id].width">
</div>

[style.width.%]工作正常，但我想做类似上面的操作，为每个单元格动态设置动画宽度，但我不知道如何访问该属性。

Answer 1

我能够通过删除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>

Answer 2

这是一个基于CSS变量的解决方案，它可以由Angular通过df <- data_frame(Combination = c("Blue", "Red", "Green", "Blue, Green", "Green, Red", "Red, Blue")) df$new <- ifelse(grepl(pattern = "Green", df$Combination), "it has green", "no green") df动态更新。

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

50%

要更新#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%); } }的值，请向Angular组件中添加一个变量，并用@HostBinding()对其进行注释：

--target-width

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

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

侧注：

请注意，与@HostBinding('style.--target-width') private targetWidth: string = '60%';属性的绑定将转换为camelCase。
根据此Github issue，此方法仅适用于Angular 9 +。

从角度2组件修改CSS关键帧

2 个答案: