css - 如何更新使用分层选择器和 Angular 组件输入变量的CSS规则

Question

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

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

我通过在母国 country--zooming 上设置一个类 ( <g> ) 来做到这一点标记为标记并在持续时间后将其删除。持续时间是使用 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;
}

typescript :

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 规则的原因是我不希望在 map 未缩放时延迟填充持续时间。那是因为我也在悬停和右键单击(选择它)时更改填充颜色，所以我希望在这种情况下即时更改填充。

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应该是 inherit 这样它将采用已配置的任何父元素的值..