I'm currently working on a web development project that involves a list of clickable elements. When one of these elements is clicked, it should become active and trigger a CSS transition (such as a transform) with a duration of 200ms. Additionally, I need to update the coordinates of this element on an HTML5 canvas at the same time.
Currently, my JavaScript code adds the "active" class to the clicked element to initiate the CSS transition, followed by calling the updateItemCoordinates() function to update the coordinates. However, there seems to be a delay between the completion of the transition and the coordinate update, causing a lag effect or retaining the previous coordinates.
The goal is to synchronize the coordinate update with the CSS transition seamlessly.
https://i.sstatic.net/aXjDY.png
For reference, here is a link to my example on CodePen: https://codepen.io/kilian-m/pen/QWzXmEr
Below is the current JavaScript code I'm using:
// Lines animation
// insert Javascript code here...
I've experimented with utilizing the transitionend event, but encountered delays. Additionally, I've tried implementing requestAnimationFrame for updating coordinates during the transition, however, I am facing challenges in properly synchronizing the two processes.