How to set an event listener for the animation end event

Instead of setting a time out, I want to set an event listener for the animation end event.

Where the function will be executed as soon as the animation completes without needing the extra timer.

How would that functionality be written into the code? https://jsfiddle.net/oLwjfgc8/

How do I add that to the code?

The fadeOut occurs after clicking the Exit button, which can be seen after clicking the play svg.

I provided a snippet where the fadeOut is viewable.

I found this: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event

But I don’t know how that would be written into my code.

CSS

.fadingOut:before,
.fadingOut .isOpen {
  animation: fadingOut 1s;
}

@keyframes fadingOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

Javascript

  function resetPage() {
    document.querySelector("body").classList.add("fadingOut");
    setTimeout(function() {

      document.querySelector("body").classList.remove("fadingOut");
      resetBackground("body");
      resetCurtains(".with-curtain");
      showAllButtons(".container.hide");
      resetButtons(".outer");
    }, 1000);
  }

Add an event listener to the body and listen for animationend, inside the callback run the code you are running inside setTimeout.

1 Like

I don’t understand how to do that in my code.

Go through this:

Go through all of it (it’s not very long), and make sure you understand it, and the examples: type them out, watch them working, modify them, try to break them.

The point at which it introduces the addEventListener function is under the heading Adding and removing event listeners, from thereon in this is how most code you will see is written.

1 Like

I don’t see how you possibly can have written all that code and not know how to do that.

You know how to attach an event listener, I’m pretty sure. So, attach one to the body inside your function. Make it listen for animationend, just like you can listen for click or submit. Inside the handler function that all event listeners have, run the code you want to run when the animation ends.

Edit: Post the code as you think it should be written then we can help you fix any issues there might be.

2 Likes

Here is my attempt, but there is an issue.

Page changes back on its own

To reproduce , click on 1 svg play button, then click the Exit button .

Click on a 2nd svg play button and then don’t touch anything.

You will notice that the page goes back to the svg play buttons on its own without touching anything.

How is that fixed in the code? https://jsfiddle.net/pw2zLskj/

Page should only change back to the svg play buttons when the Exit button is clicked.

  function resetPage() {

    document.querySelector("body").classList.add("fadingOut");
    document.querySelector("body").addEventListener("animationend", function() {

      document.querySelector("body").classList.remove("fadingOut");
      resetBackground("body");
      resetCurtains(".with-curtain");
      showAllButtons(".container.hide");
      resetButtons(".outer");
    });
  }

It will keep listening for the event. You can use once: true with the options object to remove the listener.

document.querySelector("body").addEventListener("animationend", () => {
  ...code
}, {once: true});

What if I wrote it this way instead? https://jsfiddle.net/cydwn1ba/

 function resetPage() {

    document.body.classList.add("fadingOut");
    const onAnimationEnd = function() {

      document.body.classList.remove("fadingOut");
      resetBackground("body");
      resetCurtains(".with-curtain");
      showAllButtons(".container.hide");
      resetButtons(".outer");
      document.body.removeEventListener("animationend", onAnimationEnd)
    }
    document.body.addEventListener("animationend", onAnimationEnd);
  }

What if I wrote the code this way instead? https://jsfiddle.net/hbfszoqp/

const manageUI = (function makeManageUI() {
  const body = document.body;

  function animationEndHandler(evt) {

    const animationName = evt.animationName;

    if (animationName === "fadingOut") {
      fadeReset();
    }
  }

  function fadeReset() {
    body.classList.remove("fadingOut");
    resetBackground("body");
    resetCurtains(".with-curtain");
    showAllButtons(".container.hide");
    resetButtons(".outer");
  }

  function resetPage() {
    body.classList.add("fadingOut");
  }

  function init() {
    const exitButtons = document.querySelectorAll(".exit");
    addClickToExit(exitButtons);
    body.addEventListener("animationend", animationEndHandler);
  }