0

CSS3 トランジションを使用してエフェクトを作成したいと考えています。div は、マウスオーバーで幅と背景色を変更する必要があります。その後、マウスアウトで 2 秒待ってから、通常の幅と背景色に戻ります。私がしたことは、hoverclassマウスオーバーでjQueryを介してクラスを追加し、マウスアウトで削除することです。フィドルをチェックしてください。

これには2つの問題があります。まず、ブラウザによってフィドルの解釈が異なるということです。Chrome ではすべて正常に動作します。マウスオーバーすると、div の幅がすぐに変更され、マウスアウトで 2 秒待ってから通常のサイズに戻ります。ただし、Firefox では、新しく追加された hoverclass が新しい遷移ルール​​として直接使用されます。何が起こるかというと、マウスオーバーでアニメーションが 2 秒後に開始されます。次に、マウスアウト時にクラスが削除され、Firefox が遷移ルール​​を取得する#testため、div は遅延なく通常のサイズに直接戻ります。

次に気付いたのは、背景色と幅の 2 つのプロパティをアニメーション化しようとすると、(ホバークラスのように) 幅のみに新しい遷移規則を使用すると、背景色の規則が上書きされることです。これは、ホバークラスで使用したすべてのトランジション プロパティを記述する必要があるということ#testですか?

4

1 に答える 1

2

2sを間違った css セレクターに配置しました。追加のクラスを追加する必要はありません。したがって、jQuery を取り除くことができます。:hover トランジションを使用するだけです。 http://jsfiddle.net/MMKnx/1/

#test
{
    width:100px;
    height:500px;
    background-color:#06F;
    -webkit-transition: background-color .5s ease-in-out,width .5s ease 2s;
    -moz-transition: background-color .5s ease-in-out,width .5s ease 2s;
    -o-transition: background-color .5s ease-in-out,width .5s ease 2s;
    transition: background-color .5s ease-in-out,width .5s ease 2s;
}
#test:hover
{
    -webkit-transition: width .75s ease;
    -moz-transition: width .75s ease;
    -o-transition: width .75s ease;
    transition: width .75s ease;
}
#test:hover
{
    background-color:#96C;
    width:800px;
}
于 2013-04-25T21:50:13.127 に答える