使用span和javascript创建CSS转换

使用javascript，我从html div标记中的文本中随机选取一个单词，并用span标记将其环绕。使用span标记的类，我尝试执行单词color从黑色到红色的CSS转换。然后我删除span标记，将单词改回黑色。我想要的效果是“闪动的文字”

我设法让单词改变颜色，但无法使CSS平滑过渡到工作状态

我的问题是：为什么CSS转换不起作用

我的问题似乎与类似，但在我的案例中，我无法获得“强制布局”的解决方案

我希望可以提供指向的工作链接，而不是在此处发布代码（）。如果没有，我当然会根据要求在这篇文章中添加代码

提前谢谢你！我一整天都在为这个问题绞尽脑汁，但都没有成功。是时候承认我需要这方面的帮助了：-）

编辑：添加代码

HTML:

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

div#message span
{
    color: black;
}

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

//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);

Javascript:

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

div#message span
{
    color: black;
}

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

//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);

//在单词周围插入span
var newText=text.split（randomWord）.join（“”+randomWord+“”）；
$（“#消息”）.html（新文本）；
//要求布局强制布局的请求属性
var x=$（“#消息”）.clientHeight；
//将类添加到span
var newText=newText.split（“”）.join（“”）；
$（“#消息”）.html（新文本）；

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

---

下面是一个工作示例：

CSS转换应用于元素的样式更改。当新的CSS样式应用于元素时，您可以指定要在该更改中使用的转换。在您的示例中，添加了使用红色文本样式创建的跨距span元素在创建时具有红色文本样式。您并不是在将元素从一种样式转换到另一种样式，而是简单地使用redtext类样式插入它

您需要做的是添加一个包含黑色文本的span，然后将span的类从“blacktext”更改为“redtext”，然后应用转换。您可以在没有类的情况下插入它，然后对其进行更改，但我使用了“blacktext”类使其更易于识别

请参见：

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

div#message span
{
    color: black;
}

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

//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);

---

为什么不在

DOMContentLoaded

中将div中的每个单词转换为span，然后只更改随机span的类别？另外，

$（“#消息”）。clientHeight

未定义，您需要

$（“#消息”）[0]。clientHeight

是的，发布您的代码会很好，因为1。关于SO的问题应该对未来的读者有一定的意义，因此，如果服务器宕机或文件被修改，这些问题和答案在将来仍然有意义；二,。如果不发布代码（仅链接），看起来像是有人在特定时间点（可能因为过于本地化而关闭）请求帮助修复代码中的问题，但我看到您已经努力将其最小化为可编译的示例。所以，是的，在提问时发布一些相关代码<代码>=]感谢您的回复！你的两点很有道理，我将为这个问题添加代码，并为以后的问题提供代码。谢谢你的回答！我一定会使用jquery引用和方法。然而，我的问题是，我在JSFIDLE中看不到任何颜色转换，即使我将持续时间设置为10秒，单词也会立即变为红色。我开始怀疑自己的眼睛了。在最新版本的Opera、Firefox和IE中进行了测试。我让它工作了！必须将强制布局更正为“$”（“#消息”）[0]。clientHeight；'正如shhac所写，在创建了带有“highlightedWord”类的span之后将其向下移动。谢谢你的帮助！我会接受Matts的回答，因为它包含了更多的解释，尽管你的回答基本上是一样的。谢谢你的回答！我现在明白了，最好用一个黑色文本类来创建span，这个类也可以用来引用span。然而，我的问题是，正如上面Gregs的回答一样，我看不到JSFIDLE中的任何颜色转换，即使我将持续时间设置为10秒，单词也会立即变为红色。在最新版本的Opera、Firefox和IE中测试。也许我缺少了一些真正基本的东西，我还不是网络开发专家。我让它工作了！必须将强制布局更正为“$”（“#消息”）[0]。clientHeight；'正如Shac所写，在创建带有黑色文本的跨距后向下移动。非常感谢你的帮助！