javascript - CSS 淡入/淡出在重复时无法正常工作

Question

我已经尝试解决这个问题将近半个小时了，但我不知道为什么会这样。基本上用户必须点击一个按钮来显示一些东西，然后一些东西会淡入，然后如果用户再次点击按钮，一些东西会淡出而另一个东西会淡入。这是我的 CSS 和 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);
}

这是一个例子:https://suspenser.glitch.me/suspense?link=btv9yq7qknfzt0 (只需按开始)

此外，在第一个句子淡出后，按钮不应该出现，第二个句子应该自动出现。

如果没有淡入/淡出，这个效果很好!

Answer 1

将 setTimeout 更改为 setInterval 以实现自动淡化。然后让 hidden = !hidden 为每个间隔执行可见或隐藏操作。请参阅下面的代码片段。

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>