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>

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

1 个答案: