Question

我想创建类似于文本阅读器的东西，我从这句话开始：

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

然后转到这句话：

我为段落和跨度设置了css样式，如下所示：

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

我现在想要突出显示跨度，将颜色从黑色转换为红色。我目前通过修改页面的innerHTML来移动span标记，我相信这会导致动画避免触发。

有没有人对如何在不重新生成所有红色文本的情况下触发转换有任何想法。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我创建了一个css动画，以淡入新的跨度文本，从黑色到红色，但我遇到的一个问题是它也会淡化现有的跨度红色文本。所以要解决这个问题，我介绍了两个span类。一个叫完整，一个叫新。动画仅适用于新的。

因此，当您添加新的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; }
}

移动跨度标记动画

1 个答案: