Kevin Powell - Community•8mo ago

web animation API

<!DOCTYPE html> <html> <body style="background-color: white;" id="body">
<div id="div1"></div> </body> <style> #div1{ width: 200px; height: 400px; background-color: darkred; } </style> <script> const Divtarget = document.getElementById("div1"); class animasi{ constructor(){ this.effect1 = [ { width: "200px", backgroundColor: "blue" }, { width: "1000px" } ]; this.opsi1 = { duration: 5000, fill: "forwards", easing: "ease-in-out", direction: "normal", delay: 5000 }; } } const getanime = new animasi(); const keyframEffect1 = new KeyframeEffect(Divtarget,getanime.effect1,getanime.opsi1); const animation1 = new Animation(keyframEffect1,document.timeline); animation1.play(); Divtarget.addEventListener("animationend",function change(){ const body = document.getElementById("body"); body.style.backgroundColor = "red"; }); Divtarget.removeEventListener("animationend",function change(){ const body = document.getElementById("body"); body.style.backgroundColor = "red"; }); </script> </html> i want to use animationend event on web animation api but when the animation is ended the call back function is not called why this happened does animation event like animationstart,animationend,animationiteration,animationcancel doesn't work with animation event ?

2 Replies

Jochem•8mo ago

Couple tips first: - Please share your code in a way that's easier to run like a codepen (it's free and super useful!) - If you can't use codepen or something similar (it really helps you get help from more people if you do), share your code in codeblocks. Start them with ```html or ```css or ```js, on the next line paste your code, and then on the line underneath your code add ```. It makes your code much more readable As for the answer: You're using the Animation API but animationend is only fired for css animations. You have to use the finish event on the animation itself to run code when it's completed:

animation1.addEventListener("finish", function change() {
  const body = document.getElementById("body");
  body.style.backgroundColor = "red";
});

animation1.addEventListener("finish", function change() {
  const body = document.getElementById("body");
  body.style.backgroundColor = "red";
});

also, I'd recommend using document.querySelector or document.querySelectorAll over getElementById and getElementByClassName oh, and that removeEventListener doesn't work like you think it does. You are defining a function change in the addEventListener, then removing a separate newly defined function change in the removeEventListener. It'll leave the first eventlistener in place. Just because the function body is the same, it isn't the same reference internally. If you want to use removeEventListener you'd have to use this:

function change() {
  const body = document.getElementById("body");
  body.style.backgroundColor = "red";
}
animation1.addEventListener("finish", change);
animation1.removeEventListener("finish", change);

function change() {
  const body = document.getElementById("body");
  body.style.backgroundColor = "red";
}
animation1.addEventListener("finish", change);
animation1.removeEventListener("finish", change);

that way, the two instances of change are referring to the same function and remove will work instead of just doing nothing but at the same time, if you run add then immediately run remove, the event won't fire because it's been removed, so I'm not sure why you're removing the event listener in the first place do you just want it to run once? If so, you can change addEventListener:

animation1.addEventListener("finish", change, {once: true});

animation1.addEventListener("finish", change, {once: true});

Abrar(watching bleach 🗿)•8mo ago

Thanks for the explanation sir

Gaming

Programming

web animation API