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

Question

I would like to use Angular component input attribute values to modify my CSS rules; however, my selector is hierarchical. Is this possible?

I have an SVG (country heat map) consisting of a lot of paths that represent counties. While zooming into the counties, I want to apply a class that sets the fill transition on those paths to a configurable duration (to fade in and out).

I am doing this by setting a class ( country--zooming ) on the parent country <g> tag as a marker and removing it after the duration. The duration is set on the paths with a CSS selector like this: .country--zooming path {} .

I know how to set classes and style properties on a single/specific tag in various ways in Angular – I am doing it with country--zooming . However, I don't know of any way to modify the duration in the CSS that has a selector that represents a hierarchy (in this case all path tags under a parent with a class of country--zooming ).

Is there any way to apply a dynamic/configurable CSS rule with a selector that represents a hierarchy? If not, is there any other way to accomplish this?

Here's what I have so far:

Template:

<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

This works as-is, but I want the duration to be configurable via an input property on the component, so I am looking for a way to set that duration in the CSS or to accomplish this in a way that will allow it to be configurable. I don't think selecting and looping through each path to apply the rule individually is feasible since there are 3.4k+ paths, and these are short animations. Any ideas would be greatly appreciated.

**I should add that the reason that I am switching the CSS rule on and off is that I don't want the fill duration to to be delayed when the map is not zooming. That is because I am also changing the fill color on hover and right-click (selecting it), so I want the fill change to be instant in that case.

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

set a configurable transition-duration on the parent element and inherit it to the children elements in css.. The transition-duration of children elements shall be inherit so that it will take the value of whatever the parent element has been configured..