从角度2组件修改CSS关键帧 [英] Modifying CSS keyframes from angular 2 component

问题描述

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

I have an animation that fills a table cell with a color. I want the animations keyframes to.width to be a variable that is controlled by an angular 2 component.

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.％] 可以正常工作，但是我想执行上述操作来为每个单元动态设置动画宽度，但是我不确定如何访问该属性./p>

The [style.width.%] works fine but I want to do something like the above to set the animation width dynamically for each cell but I am not sure how to access that attribute.

推荐答案

我能够通过删除CSS中的 to 声明并使用 [ngStyle] 在视图中.

I was able to solve this by removing the to declaration in the CSS and setting the value with [ngStyle] in the view.

新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>

这篇关于从角度2组件修改CSS关键帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！