I have checked the topics Javascript appendChild callback?. There, the target element is video, so the usage of loadedmetadata is the solution for that case.

In my case, there is the snackbar, but it is just a div.

I have expected that the below code will append the snackbar to body than will replace the CSS class Snackbar-Transition__HiddenState to Snackbar-Transition__DisplayingState which will trigger the CSS transition.

document.querySelector("body").appendChild(snackbar);
snackbar.style.transitionDuration = `${ displayingDuration__seconds }s`;
snackbar.classList.remove("Snackbar-Transition__HiddenState");
snackbar.classList.add("Snackbar-Transition__DisplayingState");

Contrary to expectations, the transition is instant:

But, if we’ll add the delay after appendChild, the transition will be smooth:

document.querySelector("body").appendChild(snackbar);

setTimeout(
  () => {
    snackbar.style.transitionDuration = `${ displayingDuration__seconds }s`;
    snackbar.classList.remove("Snackbar-Transition__HiddenState");
    snackbar.classList.add("Snackbar-Transition__DisplayingState");
  },
  500
);

It is NOT the solution, because we don’t know how much the delay must be.
Large delay will be felt like application lagging while small delay (some milliseconds) could be not enough. This is the case when the callback for appendChild is demanded, but there is no such callback. What could be instead?