如何更新使用分层选择器具有组件输入变量的CSS规则

Question

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

我有一个SVG(乡村热图(，其中包括许多代表县的路径。放大县时，我想应用一个将这些路径上的填充过渡设置为可配置持续时间的类(要淡入和淡出(。

我是通过在父族 <g>标签上设置一个类(country--zooming(作为标记来做到这一点，然后在持续时间后将其删除。持续时间设置为使用CSS选择器的路径上：.country--zooming path {}。

我知道如何以各种方式将类和样式属性设置在单个/特定标签上 - 我正在使用country--zooming进行。但是，我不知道有任何方法可以修改具有代表层次结构的选择器的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>

(and(

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

(and(

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

在父元素上设置一个可配置的过渡效果，并将其继承到CSS中的儿童元素。继承，以便将其配置为父母元素的值。