javascripthtmlcsstransitiondomcontentloaded

Transition properties defined in CSS classes do not take effect when changing an element's class using JavaScript

Ive got a website that when the user loads the page, I want Header One to slide in from the left and have its opacity change to 1. And for Header Two i just want the opacity to change. But for some reason it does it instantly, not over the 2s duration.

This is my first post here and I feel like im being dumb but all help will be appreciated. Please let me know if there is any other information you need.

Here is the basic code I've replicated the problem with:

document.addEventListener("DOMContentLoaded", function() {
  setTimeout(function() {
    var headingOne = document.querySelector(".header-one-hiding");
    var headingTwo = document.querySelector(".header-two-hiding");

    headingOne.classList.remove("header-one-hiding");
    headingOne.classList.add("header-one-show");

    headingTwo.classList.remove("header-two-hiding");
    headingTwo.classList.add("header-two-show");
  }, 1000);
});
.header-one-hiding {
  opacity: 0;
  left: -1000px;
  position: relative;
  transition: opacity 2s ease, left 2s ease;
}

.header-one-show {
  opacity: 1;
  left: 0px;
}

.header-two-hiding {
  opacity: 0;
  transition: opacity 2s ease;
}

.header-two-show {
  opacity: 1;
}
<!DOCTYPE html>
<html>

<head></head>

<body>
  <div class="header-one-hiding">Header One</div>
  <div class="header-two-hiding">Header Two</div>

</body>

</html>

Solution

  • You're removing the -hiding classes from the elements so the transition properties are also being removed with them. This means that, when you want to them to transition, the part that makes it transition is no longer in use. Add another class to both headers that isn't removed so the property isn't removed when shown.

    document.addEventListener("DOMContentLoaded", function() {
  setTimeout(function() {
    var headingOne = document.querySelector(".header-one-hiding");
    var headingTwo = document.querySelector(".header-two-hiding");

    headingOne.classList.remove("header-one-hiding");
    headingOne.classList.add("header-one-show");

    headingTwo.classList.remove("header-two-hiding");
    headingTwo.classList.add("header-two-show");
  }, 1000);
});
    .header-one {
  position: relative;
  transition: opacity 2s ease, left 2s ease;
}

.header-two {
  transition: opacity 2s ease;
}

.header-one-hiding {
  opacity: 0;
  left: -1000px;
}

.header-one-show {
  opacity: 1;
  left: 0px;
}

.header-two-hiding {
  opacity: 0;
}

.header-two-show {
  opacity: 1;
}
    <!DOCTYPE html>
<html>

<head></head>

<body>
  page loaded (for debugging)
  <div class="header-one header-one-hiding">Header One</div>
  <div class="header-two header-two-hiding">Header Two</div>

</body>

</html>