Transitionend event and eventloop

Question

The best way to explain my problem is these are two demos:

And that are they:

Demo 1 (works as expected in chrome, in firefox it doesn't work)

let handler = function () {
    block.classList.add("visible");
    requestAnimationFrame(() => block.classList.add("move"));
    block.addEventListener(
        "transitionend",
        () => {
            console.log("style is removed");
            this.addEventListener("click", handler, { once: true });
            block.classList.remove("move");
        },
        { once: true }
    );
};
btn.addEventListener("click", handler, { once: true });

.main {
    display: none;
    width: 100px;
    height: 100px;
    background: red;
    transition: all 5.5s ease;
}
.visible {
    display: block;
}
.move {
    transform: translateX(100px);
    background: blue;
}

<div id="block" class="main"></div>
<button id="btn">Animate</button>

Demo 2 (works incorrect)

let handler = function () {
    block.classList.add("visible");
    block.classList.add("move");
    block.addEventListener(
        "transitionend",
        () => {
            console.log("style is removed");
            this.addEventListener("click", handler, { once: true });
            block.classList.remove("move");
        },
        { once: true }
    );
};
btn.addEventListener("click", handler, { once: true });

.main {
    display: none;
    width: 100px;
    height: 100px;
    background: red;
    transition: all 5.5s ease;
}
.visible {
    display: block;
}
.move {
    transform: translateX(100px);
    background: blue;
}

<div id="block" class="main"></div>
<button id="btn">Animate</button>

I'll fast emphasize differences between two demos:

1. first demo has requestAnimationFrame

---

1. <div> block has class "visible" before starting a click handler in first demo
2. In the click handler, it has code for adding class "visible" in the second demo

So main question is: Why second demo doesn't fire transitionend event and why I don't see transition?

---

Extra demo

let handler = function () {
    alert(1);
    block.classList.add("visible");
    alert(2);
    setTimeout(() => {
      alert(4);
      block.classList.add("move");
      alert(5);
    });
    block.addEventListener(
        "transitionend",
        () => {
            console.log("style is removed");
            this.addEventListener("click", handler, { once: true });
            block.classList.remove("move");
        },
        { once: true }
    );
    alert(3);
};
btn.addEventListener("click", handler, { once: true });

.main {
    display: none;
    width: 100px;
    height: 100px;
    background: red;
    transition: all 5.5s ease;
}
.visible {
    display: block;
}
.move {
    transform: translateX(100px);
    background: blue;
}

<div id="block" class="main"></div>
<button id="btn">Animate</button>

Checkout it in chrome and firefox, seems what some part of code invokes repainting earlier, if it is not, correct me and explain why.

Answer 1

Just a few things here, you first wrote block.classList.add("visible"); I think the main reason why is that you missed either intentionally or this class="main visible" as you wrote it like class="main" in your code.

You actually needed to make use of the css style technique which is use the none to hide the div and block to show it. Here is what I did to hide it at first .visible { display: none; } then to show it I used document.getElementById("block").style.display = "block";. I added a small delay to give it a time to finish displaying then start animating which works but does not work if you remove the delay.

let handler = function () {
        //block.classList.add("visible");
document.getElementById("block").style.display = "block"; 
setTimeout(() => { block.classList.add("move"); }, 300);
        //block.classList.add("move");

    block.addEventListener(
        "transitionend",
        () => {
            console.log("style is removed");
            this.addEventListener("click", handler, { once: true });
            block.classList.remove("move");
        },
        { once: true }
    );
    };
    btn.addEventListener("click", handler, { once: true });

 .main {
        display: none;
        width: 100px;
        height: 100px;
        background: red;
        transition: all 5.5s ease;
    }
    .visible {
        display: none;
    }
    .move {
        transform: translateX(100px);
        background: blue;
    }

    <div id="block" class="main visible"></div>
    <button id="btn">Animate</button>

So to answer as to why it wasn't firing, that due to the reasons I've explained on top.