JavaScript Could anyone suggest some improvements for this?

[htmlcssjavascript28]

Can someone show me a way or ways on how this can be improved?

How the code works: heart fades in, curtain goes up, exit button fades in.

Click the exit button, heart fades in, curtain goes up, exit button fades in.

https://jsfiddle.net/zmt3sb94/

window.onload = function() {
const containerA = document.querySelector(".video-containerA");
const containerB = document.querySelector(".video-containerB");
const containerC = document.querySelector(".video-containerC");
const heartPieceA = document.querySelector(".video-containerA .heart");
const heartPieceB = document.querySelector(".video-containerB .heart");
const heartPieceC = document.querySelector(".video-containerC .heart");
const exitButton = document.querySelector(".exitA");

heartPieceA.classList.add("visible");

heartPieceA.addEventListener("transitionend", function() {
//if (e.propertyName !== 'opacity') return;
containerA.classList.add("slide");
});

heartPieceB.addEventListener("animationend", function() {
//if (e.propertyName !== 'opacity') return;
containerB.classList.add("slide");
});

heartPieceC.addEventListener("animationend", function() {
//if (e.propertyName !== 'opacity') return;
containerC.classList.add("slide");
});

containerA.addEventListener("transitionend", function(event) {
if (event.propertyName !== "transform") return;
exitButton.classList.add("visible");
});
};

Here was one attempt by me: https://jsfiddle.net/jgtnokrh/6/

After I click the exit button the heart doesn’t fade in.

The 1st time it does though.

I don't know how this one would be fixed.

window.onload = function() {
  const containers = ["A", "B", "C"].map(function(letter) {
    return {
      container: document.querySelector(".video-container" + letter),
      heartPiece: document.querySelector(".video-container" + letter + " .heart"),
    };
  });
  const exitButton = document.querySelector(".exitA");

  containers.forEach(function({
    container,
    heartPiece
  }) {
    heartPiece.classList.add("visible");

    heartPiece.addEventListener("transitionend", function() {
      container.classList.add("slide");
    });

    container.addEventListener("transitionend", function(event) {
      if (event.propertyName !== "transform") return;
      exitButton.classList.add("visible");
    });
  });
};

 

[The Raven]

What about this:

window.onload = function() {
    const containers = document.querySelectorAll("[class^='video-container']");
    const exitButton = document.querySelector(".exitA");

    containers.forEach(container => {
        const heartPiece = container.querySelector(".heart");
        heartPiece.classList.add("visible");

        heartPiece.addEventListener("transitionend", function() {
            container.classList.add("slide");
        });

        container.addEventListener("transitionend", function(event) {
            if (event.propertyName !== "transform") return;
            exitButton.classList.add("visible");
        });
    });
};