0

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

我设法让这个词改变颜色，但不能让平滑的 CSS 过渡工作。

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

我的问题似乎类似于这个问题，但我没有设法让“强制布局”的解决方案在我的情况下起作用。

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

先感谢您！我一整天都在努力解决这个问题，但没有成功。是时候承认我需要帮助了:-)

编辑：添加代码。

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

2 回答 2

1

给你的 span 一个类，这样你就可以使用 jquery 轻松获得对它的引用。然后使用 addClass 和 removeClass jquery 方法添加并随后删除赋予文本颜色的类。

这是一个工作示例：http: //jsfiddle.net/sVMZJ/

于 2012-08-26T20:49:01.923 回答
1

CSS 过渡适用于元素的样式更改。当新的 CSS 样式应用于元素时，您可以指定在该更改中使用的过渡。在您的示例中，您添加了一个使用红色文本样式创建的跨度。span 元素在创建时具有红色文本样式。您不是将元素从一种样式转换为另一种样式，您只是将其插入到 redtext 类样式中。

您需要做的是在其中添加一个带有黑色文本的跨度，然后将跨度的类从“blacktext”更改为“redtext”，然后将应用过渡。您可以在没有类的情况下插入它然后更改它，但我使用类“blacktext”使其更容易识别。

看：

http://jsfiddle.net/n8zNW/

于 2012-08-26T21:21:46.293 回答