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