如何使用setInterval和CSS樣式更改文本動畫？

Question

我正在制作一個投資組合網站。 我希望背景是自動從“ HTML”到“ CSS”到“ JavaScript”的文本。 但是，我也希望它們（不是簡單地）在animation.css中的zoomIn和zoomOut等動畫中進行更改。 換句話說，當文本“ HTML”在更改為CSS之前消失時，它會變小，直到您看不到並再次顯示為“ CSS”。 對不起，並發症。

目前，我通過在單詞數組上實現setInterval來使文本隨時間變化。

的index.html

<h1 id="change"></h1>

main.js

const symbols = ['HTML', 'CSS', 'JavaScript']
count = 0
let inthandle = setInterval(() => {
  document.getElementById("change").innerHTML = symbols[count];
  count = (count + 1) % symbols.length
}, 2000)

Answer 1

您可以通過為符號中的每個元素更改兩倍的scale transform來實現此縮小過渡。

注意過渡時間必須是setInterval周期的一半。

count需要增加2才能更改文本，但是添加.out類ID的步驟是每步交替刪除。

時間間隔已除以2，以保持與以前相同的速率。

h1元素還必須保持固定的大小和居中的文本，以使人錯覺是同一文本在變化。

最后，強制調用一次迭代回調以立即開始動畫。

 const symbols = ['HTML', 'CSS', 'JavaScript']; let count = 0; const element = document.getElementById("change"); const iteration = () => { element.innerHTML = symbols[parseInt(count / 2, 10) % symbols.length]; if (count % 2 !== 0) { element.classList.add("out"); } else { element.classList.remove("out"); } count++; // if you're affraid the code could run for so long that it could fail, // 6 is enough (number of elems * 2) if (count === symbols.length * 2) { count = 0; } }; let inthandle = setInterval(iteration, 1000); iteration(); 

 #change { transition: transform 0.5s; display: inline-block; width: 200px; text-align: center; } .out { transform: scale(0); } 

 <h1 id="change">HTML</h1> 

Answer 2

您還可以添加CSS動畫，其間隔是間隔的3倍。

 const symbols = ['HTML', 'CSS', 'JavaScript'] count = 0 let inthandle = setInterval(() => { document.getElementById("change").innerHTML = symbols[count]; count = (count + 1) % symbols.length }, 2000) 

 #change { text-align: center; animation: 6s colors infinite; } @keyframes colors { 16.66%, 50%, 56%, 83.31% { color: tomato; font-size: 3rem; } 0%, 33.33%, 66.65%, 100% { color: lightblue; font-size: 2rem; } } 

 <h1 id="change"></h1> 

在動畫內部，您可以使用transform來避免內容跳躍