classList.add() does not work inside setTimeout() function

Question

classList.add() does not work inside setTimeout() function

63 views Asked by Luis Alejandro Lopez de Anda At 17 November 2023 at 00:51

I am using Intersection Observer to hide a div element when it is inside the viewport. For that purpose I am using setTimeOut() function to hide the div element after 2 seconds and using a nice CSS transition, but the classList.add() function does not seem to work inside the setTimeout() function in order to call the CSS transition to hide it.

This is my HTML where you can see the div element with id='sbox'. All sections have a height of 100vh.


  <body>
    <section id="page-1" class="primera"></section>

    <section id="page-2" class="segunda"></section>

    <section id="page-3" class="tercera">
      <div id="sbox" class="small-box"></div>
    </section>

    <script src="js/app.js"></script>
  </body>

this is my CSS:

.primera{
width: 100%;
height 100vh
}

.segunda {
  width: 100%;
  height: 100vh;
  background-color: #cbf3f0;
  background: linear-gradient(to bottom, #cbf3f0, #2ec4b6);
}

.tercera {
  width: 100%;
  height: 100vh;
  background-color: #5e60ce;
  display: grid;
  place-items: center;
  .small-box {
    width: 50%;
    height: 50%;
    opacity: 1;
    background-color: #ffbf69;
    transition: all 5s ease-out;
  }
}

.hide {
  transition: all 5s ease-out;
  opacity: 0;
}

This is my JS file:


let options = {
  root: null,
  threshold: 0.8,
};

function hideBox(entryArray) {
  let ibox = document.getElementById("sbox");

  if (entryArray[0].isIntersecting) {
    setTimeout(() => {
      console.log("hiding the first loading element");
      ibox.classList.add("hide");
    }, 2000);
  } else {
    ibox.classList.remove("hide");
  }
}

let observer = new IntersectionObserver(hideBox, options);
observer.observe(document.getElementById("page-3"));

Original Q&A

There are 1 answers

**Jaromanda X** · Accepted Answer · 2023-11-17 01:30:08

since .tercera .small-box has a higher CSS specificity than .hide, the opacity in .hide is ignored

Simplest solution is to add

add

&.hide {
  opacity: 0;
}

inside .small-box

see the snippet

let ibox = document.getElementById("sbox");

setTimeout(() => {
  console.log("hiding the first loading element");
  ibox.classList.add("hide");
}, 2000);

.primera {
  width: 100%;
  height 3em;
}

.segunda {
  width: 100%;
  height: 3em;
  background-color: #cbf3f0;
  background: linear-gradient(to bottom, #cbf3f0, #2ec4b6);
}

.tercera {
  width: 100%;
  height: 3em;
  background-color: #5e60ce;
  display: grid;
  place-items: center;
  .small-box {
    width: 50%;
    height: 50%;
    opacity: 1;
    background-color: #ffbf69;
    transition: all 5s ease-out;
    &.hide {
      opacity: 0;
    }
  }
}

<section id="page-1" class="primera"></section>

<section id="page-2" class="segunda"></section>

<section id="page-3" class="tercera">
  <div id="sbox" class="small-box">a</div>
</section>

TechQA.

classList.add() does not work inside setTimeout() function

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in CSS

Related Questions in INTERSECTION-OBSERVER

Popular Questions

Popular Tags

Trending Questions