移動span標籤動畫

Question

我想做類似的東西到TextReader的，在那裏我開始用這句話：

<p> <span> This is some </span> text that I want to write </p> 

然後移動到這句話：

我給自己定的CSS樣式的段落和跨度如下：

p { color: black } span { color:red } 

我想現在將顏色從黑色過渡到紅色，因爲跨度突出顯示。我目前正在通過修改頁面的innerHTML來移動span標籤，我相信這會導致動畫避免觸發。

沒有任何人有任何想法，我怎麼能拿過渡到觸發，不爽口所有的紅色文字。

setTimeout(function(){ 
 
    newText = "<p> <span> This is some text that I want</span> to write </p>" 
 
    ptag = document.querySelector('p') 
 
    ptag.innerHTML = newText 
 
}, 1000)

p{ color: black } 
 
span{ color:red }

<p> <span> This is some </span> text that I want to write </p>

Answer 1

我創建了一個CSS動畫中由黑變紅新跨越的文本褪色，但我有一個問題是，它也將消失在現有的跨度紅色文本。所以爲了解決這個問題，我介紹了兩個span類。一個叫做complete，一個叫做new。動畫只適用於新的。

所以，當你添加新的HTML文本，最後new跨度將需要添加到complete跨度，您添加下一個new跨度之前，等

http://codepen.io/partypete25/pen/YWJQQB

function update(){ 
    newText = "<p> <span class='complete'> This is some text</span><span class='new'> that I want</span> to write </p>" 
    ptag = document.querySelector('p') 
    ptag.innerHTML = newText 
} 


setTimeout(function(){ update() }, 1000); 

p { 
    color:black; 
} 
span.complete { 
    color:red; 
} 
span.new { 
    animation: color-change 2s linear 1 forwards; 
} 

@-webkit-keyframes color-change { 
    0% { color: black; } 
    100% { color: red; } 
}