Transition on an element works in Chrome but does not work in Firefox-CodePudding

So i was doing a tutorial from webdev, and i hit a stump. The transition animation on an element works fine on chrome but does not work on firefox. Then element starts out with transform: translateX(110%); and a transition: transform 300ms ease-in-out;, and then we translate it to 0 so it looks like it slides off the screen. Funny thing is if you inspect the element and toggle the transform then it animates properly. Anyone got idea whats going on.

CodePenExample

GitHub Repo

CodePudding user response：

I think the problem is from browser engines between Firefox and Chrome and many more, especially in terms of DOM manipulation.

To overcome this kind of situation, I personally use a trick with setTimeout to put the action into the callstack which will be executed when all other tasks done.

In your case, I added it to make sure the toast appended first and then I'll do the animation

setTimeout(() => {
  requestAnimationFrame(() => {
     this.#toastElem.classList.add("show")
  })
}, 50)

CodePudding user response：

Do this:

-webkit-transition: transform 300ms ease-in-out;
-moz-transition: transform 300ms ease-in-out;
-o-transition: transform 300ms ease-in-out;
transition: transform 300ms ease-in-out;

This will work for mozila firefox.