如何使CSS过渡与JS .AppendChild函数一起使用？

发布于 2025-01-29 11:35:14 字数 646 浏览 1 评论 0原文

通过mouseenter事件，我正在将js函数施加到svg路径元素：

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

这与css：

transition: fill .25s;

问题的 transition一起工作。 stroke在SVG路径之间重叠，以及将悬停元素的笔触带到前面所有其他所有方面的唯一方法是将其添加到JS函数：

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

不幸的是，这无效正确使用过渡。改用类不是一个选项，因为我需要分数和locale hwb（） color Style属性属性。

我有什么可以做的，以确保元素位于正面并使过渡起作用？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤云独去闲 2025-02-05 11:35:14

一种方法是使用JavaScript自己插入颜色。

一种简单的方法可能是为每个可能的分数创建一个类。看起来您的分数在0到100之间。因此，您只需要定义101个类。例如。像：

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">

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">

回复收藏 0 原文

~没有更多了~