使用JavaScript填充div中的文本，但動畫僅適用於第一個文本

Question

我試圖創建一個登陸頁面，其中一系列文本顯示在屏幕上並連續旋轉。另外，這些文本需要用類似打字機的效果進行動畫製作。我有文本的動畫工作，但它只適用於第一個文本。當循環瀏覽其他文本時，它們只顯示在頁面上。任何想法如何解決這個問題？我正在考慮嘗試爲每個文本刷新添加帶有JavaScript的動畫CSS，但這看起來很麻煩，而不是最有效的方式。

document.addEventListener('DOMContentLoaded', function(event) { 
 
    // array with texts to type in typewriter 
 
    var dataText = ["Hi, I'm Ned.", "Developer.", "Writer."]; 
 

 
    function typeWriter(i) { 
 
    // add next text to h1 
 
    document.querySelector("h1").innerHTML = dataText[i] + '<span aria-hidden="true"></span>'; 
 

 
    // wait for a while and call this function again for next text 
 
    setTimeout(function() { 
 
     typeWriter((i + 1) % 3) 
 
    }, 10000); 
 
    } 
 

 
    // start the text animation 
 
    typeWriter(0); 
 
});

.typewriter h1 { 
 
    font-weight: bold; 
 
    color: #000; 
 
    font-family: "Lucida Console"; 
 
    font-size: 2em; 
 
    overflow: hidden; 
 
    /*Hide content before animation*/ 
 
    border-right: .1em solid white; 
 
    /*Cursor*/ 
 
    white-space: nowrap; 
 
    /*Keep text on same line*/ 
 
    margin: 0 auto; 
 
    /*Scrolling effect while typing*/ 
 
    letter-spacing: .1em; 
 
    animation: typing 3s steps(30, end), blink-caret .75s steps(1, end) infinite alternate; 
 
} 
 

 

 
/* The typing effect */ 
 

 
@keyframes typing { 
 
    from { 
 
    width: 0 
 
    } 
 
    to { 
 
    width: 100% 
 
    } 
 
} 
 

 

 
/* The typewriter cursor effect */ 
 

 
@keyframes blink-caret { 
 
    from, 
 
    to { 
 
    border-color: transparent 
 
    } 
 
    50% { 
 
    border-color: white; 
 
    } 
 
}

<div class="jumbotron" id="jumbotron"> 
 
    <div class="typewriter"> 
 
    <h1></h1> 
 
    </div> 
 
</div>

Answer 1

這裏的問題是，一旦CSS動畫完成後它不會再爲元素觸發。實現重複的唯一方法是從該元素中刪除css類（使用動畫），等待，然後讀取它，或銷燬該元素並重新創建它。

對於您的示例，我將簡單創建一個新的h1元素，編輯其內容並將其添加到DOM。 （很顯然移除舊）使用jQuery，你可以很容易地做到這一點與

var h = $("<h1>");   //creating the element 
h.innerHTML = ...; 
$(".typewriter").empty(); //remove all children 
$(".typewriter").append(h); //add new h1 element 

平原JS方法：

var h = document.createElement("h1"); //creating the element 
h.innerHTML = ...;   //setting its content 
var typewriter = document.querySelector(".typewriter"); 
typewriter.innerHTML = ''; //remove all children 
typewriter.appendChild(h); //add the new h1 element 

---

另外請注意，這樣你選擇了你的查詢選擇，這些更改將適用於所有的<h1>元素。

Answer 2

我想我可以實現你想要的。檢查出來：

var dataText = [ "Hi, I'm Ned.", "Developer.", "Writer."]; 
 
    
 
    function typeWriter(i) { 
 
     // add next character to h1 
 
     
 
     var h1 = document.createElement("h1"); 
 
     h1.innerHTML = dataText[i] +'<span aria-hidden="true"></span>'; 
 
     document.querySelector(".typewriter").append(h1); 
 
     
 

 
     // wait for a while and call this function again for next character 
 
     setTimeout(function() { 
 
      document.querySelector(".typewriter").innerHTML = ''; // add if(i === 2) to display the whole phrase 
 
      typeWriter((i + 1)%3) 
 
     }, 10000); 
 
    } 
 

 
    // start the text animation 
 
    typeWriter(0);

.typewriter h1 { 
 
    font-weight: bold; 
 
    color: orange; 
 
    font-family: "Lucida Console"; 
 
    font-size: 7em; 
 
    overflow: hidden; /*Hide content before animation*/ 
 
    border-right: .1em solid white; /*Cursor*/ 
 
    white-space: nowrap; /*Keep text on same line*/ 
 
    margin: 0 auto; /*Scrolling effect while typing*/ 
 
    letter-spacing: .1em; 
 
    animation: 
 
     typing 3s steps(30, end), 
 
     blink-caret .75s steps(1, end) infinite alternate; 
 
} 
 
/* The typing effect */ 
 
@keyframes typing { 
 
    from { 
 
     width: 0 
 
    } 
 
    to { 
 
     width: 100% 
 
    } 
 
} 
 

 
/* The typewriter cursor effect */ 
 
@keyframes blink-caret { 
 
    from, to { 
 
     border-color: transparent 
 
    } 50% { 
 
     border-color: white; 
 
    } 
 
}

<div class="jumbotron" id="jumbotron"> 
 
    <div class="typewriter"> 
 
     <h1></h1> 
 
    </div>

關鍵是要再次進行CSS動畫作品。要做到這一點，每次我創建一個新的h1元素。一旦顯示了一部分/整個短語，我只需刪除所有h1元素並重復該過程。

Answer 3

您可以使用JQuery使它更容易，我還添加了一個函數，當您的數據完全顯示時停止動畫。

<script type="text/javascript"> 
$(function() { 
var dataText = [ "Hi, I'm Ned.", "Developer.", "Writer."]; 
function typeWriter(i) { 
var content = '<h1>' + dataText[i] +'<span aria-hidden="true"></span></h1>' 
$(".typewriter").append(content); 
// wait for a while and call this function again for next character 
var myFunc = setTimeout(function() { 
    typeWriter((i + 1)%3) 
    }, 10000); 
    if (i == dataText.length - 1) { 
    clearTimeout(myFunc); 
    } 
    } 

    // start the text animation 
    typeWriter(0); 
}) 
</script> 


<div class="jumbotron" id="jumbotron"> 
    <div class="typewriter"> 
    </div> 
</div> 

你能在那裏檢查一下：https://jsfiddle.net/z4cryxx0/2/

讓我知道如果我回答你的問題。

Answer 4

您可以將動畫設置爲無限制，並將動畫的長度更改爲想要的文本更改之間的延遲時間，然後將其設置爲在3秒後（在此處爲30％）或不過長時間你想一個動畫到最後：

.typewriter h1 { 
    ... 
    animation: 
     typing 10s steps(30, end) infinite, 
     blink-caret .75s steps(1, end) infinite alternate; 
} 

@keyframes typing { 
    0% { 
    width: 0; 
    } 
    30% { 
    width: 100%; 
    } 
} 

這種方法的缺點是，如果你想改變文本之間的延遲的長度，你必須同時修改JavaScript的延遲和CSS動畫的長度。

JSFiddle