CODEWITHSUNDEEP
javascripthtmlcss
Mxm
Mxm

Reputation: 97

CSS fade in / fade out doesn't work properly when repeating

I've been trying to fix this for almost half an hour now, and I have no idea why it happens. Basically the user has to click on a button to reveal something, that something fades in, then if the user clicks the button again, the something fades out and another something fades in. Here's my CSS and JS:

    .visible,
.hidden {
  overflow: hidden;
  /* This container should not have padding, borders, etc. */
}
.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}
.visible > div,
.hidden > div {
  /* Put any padding, border, min-height, etc. here. */
}
.hidden > div {
  margin-top: -10000px;
  transition: margin-top 0s 2s;
}

JAVASCRIPT:

let hidden = true;
function press() {
   butt.style.display = "none";
  if (hidden == false) msgDOM.classList.toggle("hidden");
 if (butt.innerHTML != "continue") butt.innerHTML = 'continue';
   setTimeout(() => {
     msgDOM.innerHTML = msgs[0];
     if (hidden == true) msgDOM.classList.toggle("visible");
     msgs.shift();
     console.log(msgs);
     hidden = false;
     if (msgs.length == 0)  {
       butt.innerHTML = "See Full"
       butt.onclick = () => {
          alert(og.join("\n"));
       }
     }
     butt.style.display = "block";
   }, secs * 1000);
}

Here's an example: https://suspenser.glitch.me/suspense?link=btv9yq7qknfzt0 (just press start)

Also, after the first sentance fades out, the button is NOT supposed to appear and the second sentance is supposed to appear automatically.

Without the fade in / fade out this works perfectly!

Upvotes: 1

Views: 239

Answers (1)

Joe
Joe

Reputation: 86

change setTimeout to setInterval for automatic fading. then make hidden = !hidden for performing visible or hidden operation for each interval. see code snippet below.

let butt = document.getElementById('butt')
let msgDOM = document.getElementById('msg')
let hidden = true;

butt.addEventListener('click', press)
let msgs = ['first', 'second', 'third', 'fourth']

function press() {
  butt.style.visibility = 'hidden';

  let interval = setInterval(
    () => {
    
      // when it is hidden is false make msgDOM hidden
      if (!hidden) msgDOM.classList.replace("visible", "hidden")
      
      // if (butt.innerHTML != "continue") butt.innerHTML = 'continue';

      // when hidden is true make the msgDOM visible then pass message
      if (hidden) {
        msgDOM.classList.replace("hidden", "visible");
        msgDOM.innerHTML = msgs[0];
        msgs.shift();
      }

      // toggle hidden so that visible or hidden transition should run for every 3s
      hidden = !hidden
      if (msgs.length == 0) {
        butt.innerHTML = "See Full"
        clearInterval(interval)
        butt.style.visibility = 'visible';
        butt.onclick = () => {
          alert('finished')
        }
      }
    }, 3000)
}
.visible,.hidden {
  overflow: hidden;
  /* This container should not have padding, borders, etc. */
}
.visible {
  /* visibility: visible; */
  opacity: 1;
  transition: opacity 2s linear;
}
.hidden {
  /* visibility: hidden; */
  opacity: 0;
  /* transition: visibility 0s 2s, opacity 2s linear; */
    transition: opacity 2s linear;
}
.visible > div,
.hidden > div {
  /* Put any padding, border, min-height, etc. here. */
}
.hidden > div {
  margin-top: -10000px;
  transition: margin-top 0s 2s;
}

.container {
  background-color: black;
  height: 200px;
  color: white;
  text-align: center;
  padding-top: 50px;
}
<div class="container">
    <h3 id="msg" class="hidden">
      
    </h3>
    <button id="butt">start</button>
</div>

Upvotes: 1

Related Questions