使用 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);
最佳答案
CSS 过渡适用于元素的样式更改。当新的 CSS 样式应用于元素时,您可以指定要在该更改中使用的过渡。在您的示例中,您添加了一个使用红色文本样式创建的跨度。 span 元素在创建时具有红色文本样式。您并没有将元素从一种样式转换为另一种样式,您只是将它与 redtext 类样式一起插入。
您需要做的是添加一个带有黑色文本的跨度,然后将跨度的类从“blacktext”更改为“redtext”,然后将应用转换。您完全可以在没有类的情况下插入它,然后对其进行更改,但我使用了类“blacktext”以使其更易于识别。
参见:
关于javascript - 使用 span 和 javascript 创建 CSS 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12133646/