Question 176795 in Html Question posted in
Some basic documentation can be found here.

Why does CSS transition only work on the 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.

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>

View on CodePen

Tags:

2

Answers


  1. 0

    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");
  }
}
    Login or Signup to reply.
  2. 0

    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");
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search