如何將淡入淡出添加到內部 HTML？

Question

當內部 HTML 中的數組項更改時，如何實現淡入和淡出？ 我希望它淡出並消失，然后出現下一種淡入的語言。

 var langs = ["Tamil", "Hindi", "Kannada", "Malayalam"]; var count = 0; var langLength = langs.length; var language = document.querySelector(".language"); setInterval(e => { count = count % langs.length; var newColour = langs[count]; language.innerHTML = `${newColour}` count = count + 1; }, 1500);

 .language { font-weight: bold; }

 <div class="content"> This language <span class="language"></span> <br> is an Indian language. </div>

Answer 1

您可以在 CSS 中使用無限的 animation。 將 animation 的持續時間設置為等於用於setinterval的值。

 var langs = ["Tamil", "Hindi", "Kannada", "Malayalam"]; var count = 0; var langLength = langs.length; var language = document.querySelector(".language"); setInterval(e => { count = count % langs.length; var newColour = langs[count]; language.innerHTML = `${newColour}` count = count + 1; }, 1500);

 .language { font-weight: bold; animation: fadeOutIn 1.5s infinite; } @keyframes fadeOutIn { 0%, 100% { opacity: 0 } 50% { opacity: 1 } }

 <div class="content"> This language <span class="language"></span> <br> is an Indian language. </div>