Question

所以，我做了一些每次点击触发的互动，我也可以使用开关，但我想让它更具可读性。所有这些过渡都有一些共同之处，那就是它们在瞬间结束，所以我尝试使用css * { transition: all 0.5s; }甚至body { transition: all 0.5s; }，但过渡似乎并不顺畅。甚至背景变化都不顺利。每当innerHTML发生变化时，它就会立即发生，而且我试图在跨度之后不要让自己陷入混乱。所以问题是，如何使所有过渡顺利进行？提前致谢：D

  var text = 0;

function changeText() {
  text += 1;
  if (text === 0) {
document.getElementById('secHeader').innerHTML = "Click anywhere to begin.";
}
else if (text === 1) {
document.getElementById('secHeader').innerHTML = "Are you ready?";
}
else if (text === 2) {
document.getElementById('secHeader').innerHTML = "Let's begin then...";
}
else if (text === 3) {
document.getElementById('secHeader').innerHTML = "You're about to experience a journey you'll never forget.";
}
else if (text === 4) {
document.getElementById('ImageBox').style.display = "none";
document.body.style.background = "black";
}
else if (text === 5) {
document.getElementById('thHeader').style.display = "block";
}
else if (text === 6) {
document.getElementById('thHeader').innerHTML = "You must be very curious then..."
}
else if (text === 7) {
document.getElementById('thHeader').style.visibility = "hidden";
document.getElementById('ftHeader').style.display = "block";
}
else if (text === 8) {
document.getElementById('ftHeader').innerHTML = "We can show you something..."
}
else if (text === 9) {
document.getElementById('ftHeader').style.visibility = "hidden";
document.getElementById('ffHeader').style.display = "block";
}
else if (text === 10) {
  document.getElementById('ffHeader').innerHTML = "Let's see..."
}
else if (text === 11) {
document.getElementById('ffHeader').style.visibility = "hidden";
document.body.style.background = "linear-gradient(to right, #0f2027, 
#203a43, #2c5364)";
}
}

Answer 1

如果使用'display：none'然后'阻止'，则转换属性将不起作用。元素应该在DOM中，'display：none'从DOM中删除元素。

Answer 2

some CSS properties可能受到过渡影响的影响。

如何平滑所有JavaScript转换？

2 个答案: