如何更新使用分层选择器的css规则，并在角上使用组件输入变量

Question

我想使用角分量输入属性值来修改我的CSS规则；但是，我的选择器是分层的。这个是可能的吗？

我有一个SVG (乡村热图)，由许多代表县的路径组成。在缩小到县中时，我希望应用一个类，将这些路径上的填充转换设置为可配置的持续时间(淡入或淡出)。

为此，我在母国<g>标记上设置一个类(<g>)作为标记，并在持续时间之后删除它。持续时间设置在使用CSS选择器的路径上，如：.country--zooming path {}。

我知道如何以不同的角度在单个/特定的标记上设置类和样式属性--我是用country--zooming来做的。但是，我不知道如何修改CSS中的持续时间，因为CSS中有一个表示层次结构的选择器(在本例中，所有path标记都位于具有country--zooming类的父级下)。

有没有任何方法可以使用表示层次结构的选择器应用动态/可配置的CSS规则？如果没有，还有其他方法来实现这一点吗？

到目前为止，我的情况如下：

模板：

<svg>
  <g class="country">
    <path ... />
    <path ... />
    ...
  </g>
</svg>

CSS：

.country--zooming path {
  transition: fill 2000ms ease-in-out;
}

打字本：

let country = this.chart.nativeElement.querySelector(".country");

country.classList.add("country--zooming");

this.timer = setTimeout(() => {
  country.classList.remove("country--zooming");
}, 2000);

// set the new fill colors for paths here

这是按原样工作的，但我希望持续时间可以通过组件上的一个输入属性进行配置，所以我正在寻找一种方法来设置CSS中的持续时间，或者以一种允许其可配置的方式来完成这个任务。我不认为选择和循环每个路径来单独应用规则是可行的，因为有3.4k+路径，而且这些都是简短的动画。任何想法都将不胜感激。

**我应该补充一点，我打开和关闭CSS规则的原因是，当地图没有缩放时，我不希望填充持续时间被延迟。这是因为我也改变了填充颜色在悬停和右键点击(选择它)，所以我希望填充更改是即时的在这种情况下。

Answer 1

<svg>
    <g [class.country--zooming]="isCountryZooming" [style.transition-duration]="transitionDuration">
        <path ... />
        <path ... />
    ...
    </g>
</svg>

(和)

.country--zooming path {
  transition: fill inherit ease-in-out;
}

(和)

this.durationTime = 2000;
this.isCountryZooming = true;
this.transitionDuration = durationTime + 'ms';

this.timer = setTimeout(() => {
    this.isCountryZooming = false;
    this.transitionDuration = 'initial';
}, this.durationTime);

// set the new fill colors for paths here

在父元素上设置一个可配置的transition-duration，并将其继承到css中的子元素。子元素的transition-duration应该是继承，因此它将接受父元素已配置的任何值。