Итак, я сделал некоторые взаимодействия, которые запускаются при каждом нажатии, я мог бы также использовать переключатель, но я хотел сделать его более читабельным.У всех этих переходов есть что-то общее, и они завершаются в одно мгновение, поэтому я попытался использовать 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)";
}
}