平滑變化的文字

Question

我試圖在我的網站上每分鍾添加一些自動更改的文本。 我對自己的代碼感到滿意，但是我希望動畫更流暢，因此內容顯示和消失的速度更慢。 有任何想法嗎？

 var cit = new Array(" Cool APP", " Best App ", " Love this App", " So good "); var author = new Array("Matt"," Laz ","SoSo","JoJo"); var ind= 0; function ChangeText(){ document.getElementById('Citation').innerHTML = cit[ind]; document.getElementById('author').innerHTML = author[ind]; if(ind < cit.length - 1 ){ ind++; }else{ ind = 0; } setTimeout("ChangeText();", 400); } ChangeText(); 

 <p id = "Citation"> </p> <p id = "author"> </p> 

Answer 1

我們可以利用一些CSS轉換並擴展您的JavaScript和html以獲得所需的功能。 以下文字說明下面的代碼。

使用css，我們可以告訴瀏覽器在目標持續時間內使用不同的動畫技術（ ease-in ， ease-out等）更改某些屬性。 以下默認值是在1秒鍾內進行的ease過渡，將針對opacity更改的特定元素堅持到CSS選擇器/規則上（有關更多信息，請參閱w3學校過渡 ）。

transition: opacity 1s;

現在用於設置html / javascript以使用過渡。 我們將要制作一些html元素，這些元素將在下一個引用/作者之間來回切換。 當我們增加目標引文/作者時，這些將基本上淡入/淡出。 我們需要利用一些絕對的位置，以便元素重疊，我們需要一些包含div的幫助來完成工作（請參見下面的HTML和CSS，請注意我正在執行1秒的轉換）。

定義HTML之后，我們必須更新javascript以設置下一個和原始ChangeCitation1() /作者的innerHTML（請參閱下面的更新的ChangeCitation1()和ChangeCitation2()方法，請注意切換文本需要2秒的延遲，為此在生產中可能會設置為60s）。

基本上，我們有一個切換功能，可以將策展人/作者和策展人/作者設置在平台上，並將不透明度無限地向后翻轉。 淡入淡出1秒后，每2秒更改一次文字。

 var cit = new Array(" Cool APP", " Best App ", " Love this App", " So good "); var author = new Array("Matt"," Laz ","SoSo","JoJo"); var ind= 0; document.getElementById('Citation1').innerHTML = cit[ind]; document.getElementById('Author1').innerHTML = author[ind]; ChangeCitation2(); function ChangeCitation2(){ incrementIndex() document.getElementById('Citation2').innerHTML = cit[ind]; document.getElementById('Author2').innerHTML = author[ind]; document.getElementById('Citation1').style.opacity = 0; document.getElementById('Author1').style.opacity = 0; document.getElementById('Citation2').style.opacity = 1; document.getElementById('Author2').style.opacity = 1; setTimeout(ChangeCitation1, 2000); } function ChangeCitation1(){ incrementIndex(); document.getElementById('Citation1').innerHTML = cit[ind]; document.getElementById('Author1').innerHTML = author[ind]; document.getElementById('Citation1').style.opacity = 1; document.getElementById('Author1').style.opacity = 1; document.getElementById('Citation2').style.opacity = 0; document.getElementById('Author2').style.opacity = 0; setTimeout(ChangeCitation2, 2000); } function incrementIndex(){ if(ind < cit.length - 1 ){ ind++; }else{ ind = 0; } } 

 #Citation1, #Author1{ transition: opacity 1s; } #Citation2, #Author2{ transition: opacity 1s; position:absolute; top:0px; margin-top:0px } #citationContainer, #authorContainer{ position:relative; } 

 <div id="citationContainer"> <p id = "Citation1"></p> <p id = "Citation2"></p> </div> <div id="authorContainer"> <p id = "Author1"></p> <p id = "Author2"></p> </div> 

您可以擴展以下內容以使用psuedo元素::before或::after ，並在CSS中操縱它的content ...但這是您深入研究的好起點！