如何平滑所有 JavaScript 过渡?

Question

所以，我做了一些每次点击都会触发的交互，我也可以使用switch，但我想让它更具可读性。 所有这些过渡都有一些共同点，那就是它们在瞬间完成，所以我尝试使用 css* { transition: all 0.5s; }甚至body { transition: all 0.5s; }但过渡似乎并不平滑。甚至背景变化也不流畅。每次内部HTML更改时，它都会立即发生，我尽量不要让自己在一个又一个跨度中褪色。所以问题是，如何使所有过渡平滑？提前致谢: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"，然后使用"block"，则转换属性将不起作用。该元素应位于 DOM 中，并且"display： none"从 DOM 中删除元素。

Answer 2

有一些CSS属性可能会受到过渡效果的影响。