JS Event & Animation

target vs currentTarget

target: the element that triggered the event (e.g., the user clicked on)
currentTarget: the element that the event listener is attached to.

Transition Event Properties

js

el.addEventListener("transitionstart", () => {
    console.log(e.elapsedTime) // 0
    console.log(e.propertyName) // transition property
})
el.addEventListener("transitionend", (e) => {
    console.log(e.elapsedTime) // same as transition duration
    console.log(e.propertyName) // transition property
})

Animation Event Properties

js

el.addEventListener("animationstart", () => {
})
el.addEventListener("aniationend", (e) => {
})
el.addEventListener("animationiteration", (e) => {
    // triggered when animation iterated
})

requestAnimationFrame

js

let timeId;

// Start animation (60fps: 1초당 60번)
const run = () => {
    timeId = requestAnimationFrame(run);
}
run();

// Cancel animation
cancelAnimationFrame(timeId);