如何更新使用分层选择器的css规则和角度中的组件输入变量

Question

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

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

我通过在父国家<g> 标记上设置一个类 (country--zooming) 作为标记并在持续时间后将其删除来做到这一点。使用 CSS 选择器在路径上设置持续时间，如下所示：.country--zooming path {}。

我知道如何在 Angular 中以各种方式在单个/特定标签上设置类和样式属性——我正在使用 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>

（和）

.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应为继承，这样它将采用已配置的父元素的值..