I wanna prevent the CSS transition on page load and I came out with my own solution.

Because the answer here isn't working for me Stop CSS transition from firing on page load

However, I myself do not understand my own solution although it works...

My solution is to add a preload class with transition: none!important; to the body, then remove this class when the page is fully loaded.

What I don't understand is that this script is before the footer, I guess when the browser reaches this line, the CSS transition is already loaded because I put the CSS file in the header tag.

But why is this code still works?

const body = document.querySelector('body');

body.classList.add('preload');

window.addEventListener('load', function() {
  body.classList.remove('preload');
});