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

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 に答える