why is css transition only working with second click

It is not even double click, it just requires second click to work. I tried putting the setTimeout outside of the loop and it works only when it goes from next page to first page, in codepen its changing back to default.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function transitionEffect() {
  const button = document.querySelector("#last");
  button.addEventListener("click", function() {
    var layers = document.querySelectorAll(".bottom-layer");
    for (const layer of layers) {
      setTimeout(switchVisible, 900);
      layer.classList.toggle("active");
    }
  });
}

function switchVisible() {
  if (document.getElementById("main-cont")) {
    if (document.getElementById("main-cont").style.display == "none") {
      document.getElementById("main-cont").style.display = "block";
      document.getElementById("overlay-cont").style.display = "none";
    } else {
      document.getElementById("main-cont").style.display = "none";
      document.getElementById("overlay-cont").style.display = "block";
    }
  }
}

<!-- language: lang-css -->

#overlay-cont {
  display: none;
  z-index: 1;
}

.bottom-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0;
  bottom: auto;
  right: auto;
  background: #48466d;
  transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.bottom-layer.active {
  top: -100%;
}

.bottom-layer--2 {
  background: #ecf3a3;
  transition-delay: 0.12s;
}

.bottom-layer--3 {
  background: #95a792;
  transition-delay: 0.4s;
}

<!-- language: lang-html -->

<button onclick="transitionEffect()" id="last"> click</button>
<div id="main-cont">
  <h3>first page</h3>
</div>
<div id="overlay-cont">
  <div class="row">
    <div class="col-md-6 overlay-text" id="overlay-col">
      <h1> next page</h1>
    </div>
    <div class="col-md-6" id="overlay-col">

    </div>
  </div>
</div>
<div class="transition-cont">
  <div class="bottom-layer"></div>
  <div class="bottom-layer bottom-layer--2"></div>
  <div class="bottom-layer bottom-layer--3"></div>
</div>
</div>

<!-- end snippet -->

View on CodePen

You are attaching your click listener inside click event handler. Therefore you are waiting for 1st click to start listening for clicks and start responding to them.
In order to make it work you need to rewrite your click handler

function transitionEffect() {
  var layers = document.querySelectorAll(".bottom-layer");
  for (const layer of layers) {
    setTimeout(switchVisible, 900);
    layer.classList.toggle("active");
  }
}

The bug in your code is the following:

• You gave the button an onclick handler that calls transitionEffect()
• Your transitionEffect function didn't execute the effect; instead, it added an event handler to the click button.
• As a result, the first click didn't do anything, except set a handler.
• Furthermore, every subsequent click added an additional event handler. After clicking 6 times, for example, there were 6 event handlers, so the next time you click, the active classes toggled 6 times, resulting in no visible change.

Here's a simple fix, which removes the addEventListener wrapper of the transitionEffect function:

function transitionEffect() {
    var layers = document.querySelectorAll(".bottom-layer");
    for (const layer of layers) {
      setTimeout(switchVisible, 900);
      layer.classList.toggle("active");
    }
}