Achieving CSS transition effects using the .appendChild function in JavaScript

Question

Achieving CSS transition effects using the .appendChild function in JavaScript

When using the mouseenter event, I have a JavaScript function applied to an svg path element:

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

This function works alongside a CSS transition:

transition: fill .25s;

The issue arises when the stroke overlaps between different svg paths, and the only way to bring the hovered element's stroke to the front is by adding this line to the JS function:

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

However, this method doesn't seamlessly integrate with the transition. Applying a class is not an ideal solution as it requires access to the score and locale parameters within the hwb() color style property.

Is there a workaround that maintains the element at the forefront while ensuring the transition functions correctly?

javascript css vue.js svg vuejs3

Answer 1

Answer №1

To achieve this effect, one method is to generate color interpolation using Javascript.

Alternatively, you can take a simpler route by creating separate classes for each possible score value. It seems like your scores range from 0 to 100, so you would only need to define 101 classes. For example:

let scoreElem = document.getElementById("score")

scoreElem.addEventListener("input", updateFill);

function updateFill() {
  document.getElementById("rect").setAttribute("class", 'score-' + scoreElem.value);
}

// Set initial fill on startup
updateFill();

rect {
  transition: fill 1s;
}

/* Using increments of 10 for demonstration */
.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">

Answer 2

To achieve this effect, one method is to generate color interpolation using Javascript.

Alternatively, you can take a simpler route by creating separate classes for each possible score value. It seems like your scores range from 0 to 100, so you would only need to define 101 classes. For example:

let scoreElem = document.getElementById("score")

scoreElem.addEventListener("input", updateFill);

function updateFill() {
  document.getElementById("rect").setAttribute("class", 'score-' + scoreElem.value);
}

// Set initial fill on startup
updateFill();

rect {
  transition: fill 1s;
}

/* Using increments of 10 for demonstration */
.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">

Achieving CSS transition effects using the .appendChild function in JavaScript

Answer №1

Similar questions

Ways to design each element in React

Ensure that the context is used to effectively clear any existing data from the previous bar chart

What is the best way to access and retrieve object properties in JavaScript?

How can I make sure addEventListener only responds to numbers and not images?

Efficiently Loading Vue Components with Webpack 2

Firebase Functions: Your functions are missing a definition

The process of extracting all arrays from a JSON object

Creating 3D Shapes with three.js

How can I resolve the issue with the HTML/CSS footer not functioning properly on Safari for iPhone in my mobile site?

The transfer of information through HTTP

How to incorporate an icon into a React Bootstrap Dropdown menu

Endless cycle due to $digest in AngularJS

Retrieve image details and display them in the console when the page is resized

How to Choose Between Landscape and Portrait Printing Modes in Firefox and Internet Explorer 8

Guide to creating a cryptosystem using a Synchronous Stream Cipher with Vue js

Tips for setting up Production and Development builds using vue-cli

How can you efficiently load the materials for a THREE.BoxGeometry using THREE.LoadingManager()?

Tips for adjusting the size and position of these div containers

Ensure that the div element spans the entire width of the screen

Is it possible to synchronize functions in node.js with postgresql?