How to make CSS transition work with JS .appendChild function?

Question

Via mouseenter event I'm applying following JS function to an svg path element :

const fadeIn = (event, locale) => {
    event.target.style.fill = 'hwb(' + (120 - score[locale] * 1.2) + ' 0% 0% / 1)'
}

This works together with a transition from CSS:

transition: fill .25s;

Problem is that the stroke overlaps between svg paths , and the only way to bring the hovered element's stroke to the front above all others is by adding to the JS function:

event.target.parentElement.appendChild(event.target)

Unfortunately this doesn't work properly with the transition . Applying a class instead is not an option because I need score and locale parameters inside the hwb() color style property.

Is there anything I can do, to ensure the element being at the front AND making the transition work?

Answer 1

One way would be to interpolate the colour yourself using Javascript.

A simpler approach might be to create a class for each possible score. It looks like your scores are between 0 and 100. So you'd only need 101 classes defined. Eg. something like:

 let scoreElem = document.getElementById("score") scoreElem.addEventListener("input", updateFill); function updateFill() { document.getElementById("rect").setAttribute("class", 'score-' + scoreElem.value); } // Initialise fill at startup updateFill();

 rect { transition: fill 1s; } /* Sticking to steps of 10 for this demo */.score-0 { fill: hwb(120 0% 0%); }.score-10 { fill: hwb(108 0% 0%); }.score-20 { fill: hwb(96 0% 0%); }.score-30 { fill: hwb(84 0% 0%); }.score-40 { fill: hwb(72 0% 0%); }.score-50 { fill: hwb(60 0% 0%); }.score-60 { fill: hwb(48 0% 0%); }.score-70 { fill: hwb(36 0% 0%); }.score-80 { fill: hwb(24 0% 0%); }.score-90 { fill: hwb(12 0% 0%); }.score-100 { fill: hwb(0 0% 0%); }

 <svg> <rect id="rect" width="100%" height="100%"/> </svg> <br> <input type="range" id="score" name="score" min="0" max="100" value="0" step="10">