Question

使用javascript，我从html div标签中的文本中随机选择一个单词并用span标签包围它。使用span标签的类我尝试执行从黑色到红色的单词颜色的CSS转换。然后我删除span标签将单词改回黑色。我正在寻找的效果是“闪烁的话语”。

我设法改变颜色，但无法顺利完成CSS过渡。

我的问题是：为什么CSS过渡不起作用？

我的问题似乎与this question类似，但我无法在我的案例中找到“强制布局”的解决方案。

我希望可以提供test code I am working with的工作链接，而不是在此处发布代码（javascript file here）。如果没有，我当然会根据要求在此帖子中添加代码。

提前谢谢！在一整天没有成功的情况下，我一直在努力克服这个问题。是时候承认我需要这方面的帮助： - ）

编辑：添加代码。

HTML：

<div id="message">
Some words here.
</div>

CSS：

div#message span
{
    color: black;
}

div#message span.redtext
{
    transition: color 5s ease-out 0s;
    color: red;
}

使用Javascript：

//Insert span around word
var newText = text.split(randomWord).join('<span>' + randomWord + '</span>');
$("#message").html(newText);

//Request property that requires layout to force a layout 
var x = $("#message").clientHeight;

//Add class to span
var newText = newText.split('<span>').join('<span class="redtext">');
$("#message").html(newText);

Answer 1

为您的span提供一个类，以便您可以使用jquery轻松获取对它的引用。然后使用addClass和removeClass jquery方法添加并随后删除赋予文本颜色的类。

以下是一个有效的例子：http://jsfiddle.net/sVMZJ/

Answer 2

CSS过渡适用于元素的样式更改。当新的CSS样式应用于元素时，您可以指定要在该更改中使用的转换。在您的示例中，您添加了使用红色文本样式创建的范围。 span元素在创建时具有红色文字样式。您没有将元素从一种样式转换为另一种样式，只需使用redtext类样式插入它。

您需要做的是在其中添加带有黑色文本的范围，然后将范围的类别从“blacktext”更改为“redtext”，并且将应用转换。您可以在没有类的情况下插入它然后更改它，但我使用了类'blacktext'来更容易识别。

查看：

http://jsfiddle.net/n8zNW/

使用span with javascript创建CSS过渡

2 个答案: