它甚至不是雙擊，它只需要第二次點擊工作。我試著把setTimeout放在循環之外，只有當它從下一頁轉到第一頁時才起作用，在codepen中它變回默認值。

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";
    }
  }
}

#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;
}

<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>

您正在click事件處理程序中附加您的click偵聽器。因此，您正在等待第一次點擊，以開始監聽點擊并開始響應它們。 為了讓它工作，你需要重寫你的點擊處理程序

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

代碼中的錯誤如下:

您為按鈕提供了一個調用transitionEffect()的onclick處理程序 您的transitionEffect函數沒有執行效果；相反，它向click按鈕添加了一個事件處理程序。 結果，第一次點擊沒有做任何事情，除了設置一個處理程序。 此外，隨后的每次點擊都會添加一個額外的事件處理程序。例如，單擊6次后，有6個事件處理程序，所以下次單擊時，活動類切換6次，結果沒有明顯變化。 下面是一個簡單的修復方法，它刪除了transitionEffect函數的addEventListener包裝:

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