How to control transitions with multiple CSS class assignments from a single Javascript function?-CodePudding

I have one div, with buttons that trigger JS functions to add/remove CSS classes to the div. I understand this is a common way of doing simple animations ("transitions"). Try pressing the first two buttons, one after another. The red div will teleport up and become semi transparent, then fade in and slide back down. It always works.

The third button simply executes the same code as the first two buttons, but from one function. I expected it to have the same visible effect: the div immediately would jump up from the translate and be transparent, then during the course of 1 second it would slide back to its normal spot and fade in to full opacity. But it does not - the button has no visible effect.

Why? How can I make this work?

Here is the JS, see the whole thing at the codepen link.

const div = document.getElementById('red-box')

function translateUp() {
  div.classList.remove('no-translate');
  div.classList.add('translate-up');
}

function noTranslate() {
  div.classList.remove('translate-up'); 
  div.classList.add('no-translate');
}

//why does this function not show any transition animation?
function both() {
  translateUp();
  noTranslate();
}

https://codepen.io/DMcCreepy/pen/BampPyB

No jQuery please :)

CodePudding user response：

The reason is that the functions are executed immediately one after the another, with no time to see the effect. transition in CSS refers to when the class is applied (could be related to a CSS state like :hover), not to switching classes via JavaScript.

To add the 1 second delay in the JS, you can use window.setTimeout:

function both() {
  translateUp();
  window.setTimeout(noTranslate, 1000);
}

CodePudding user response：

You are relying on the div getting rerendered and all its properties being recomputed before switching the class again with the second function. I am not sure entirely what order things are done in under the hood, but I am sure you cannot rely on constructions like this working in general. It is true that switching classes is a common way to do animations and maybe it is possible to work out a solution like that, but I have provided a workaround using a CSS animation. You can read more about animations here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

const div = document.getElementById('red-box')

div.addEventListener('animationend', reset);
function reset() {
  div.classList.remove('dropin');
}
function both() {
  div.classList.add('dropin');
}

button {
  display: block;
}

.box {
  height: 70px;
  width: 80px;
  font-size: 50px;
  background-color: red;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: none;
}
.box.dropin {
  animation-name: dropin;
}
@keyframes dropin {
  from {
    transform: translate(0, -40px);
    opacity: 0.1;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

<div id="red-box" >div</div>

<button onclick='both()'>Do Both</button>