[英]How to make CSS transition work with JS .appendChild function?
Via mouseenter
event I'm applying following JS function to an svg path element
:通过
mouseenter
事件,我将以下 JS function 应用于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:这与 CSS 的
transition
一起工作:
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:问题是
stroke
在svg paths
之间重叠,将悬停元素的笔划置于最前面的唯一方法是添加到 JS function:
event.target.parentElement.appendChild(event.target)
Unfortunately this doesn't work properly with the transition
.不幸的是,这不适用于
transition
。 Applying a class instead is not an option because I need score
and locale
parameters inside the hwb()
color style property.应用 class 不是一个选项,因为我需要
hwb()
颜色样式属性中的score
和locale
参数。
Is there anything I can do, to ensure the element being at the front AND making the transition work?有什么我可以做的,以确保元素在前面并使转换工作?
One way would be to interpolate the colour yourself using Javascript.一种方法是使用 Javascript 自行插入颜色。
A simpler approach might be to create a class for each possible score.一种更简单的方法可能是为每个可能的分数创建一个 class。 It looks like your scores are between 0 and 100. So you'd only need 101 classes defined.
看起来你的分数在 0 到 100 之间。所以你只需要定义 101 个类。 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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.