移动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; } 
}