1

プロジェクトで Foundation フレームワークを使用しています。ナビゲーション用のトップ バー機能により、ホバー時にドロップダウン ナビゲーションを表示できます。

ホバーイベント中.hoverに、関連する要素にクラスが追加されるため、CSS の変更がスムーズな遷移によってアニメーション化されるのではなく、表示されます。

これは私に考えさせました。CSS 定義の変更を (トランジションなどを介して) アニメーション化することは可能ですか?

この例を見てください。これがデフォルトの要素です:

<div class="a-box">Some content</div>

そして、それはデフォルトの CSS です:

.a-box {
    width: 200px;
    height: 200px;
    background: red;
}

フレームワークにカーソルを合わせると（コアファイルを編集して更新のためにクリーンに保ちたくありません）、hoverクラスが追加されます。要素を次のようにします。

<div class="a-box hover">Some content</div>

ホバーされた要素の CSS は次のようになります。

.a-box.hover {
    width: 400px;

    // I thought perhaps adding the following would work but it doesn't appear to

    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    transition: all 200ms ease;
}

私はこれについて他のPOVを聞きたいと思っています! これが重複しているかどうかはわかりませんが、私が読んだすべての投稿は何らかの形式の jQuery アニメーションに関連しています。

4

1 に答える 1

1

あなたはそれほど的外れではありません。ここに実用的な例があります。

あなたの例の主なエラーは、あなたが持っているということです

<div class="my-box hover">Some content</div>

a-boxしかし、CSS はnotを探していmy-boxます。

習慣として、私は通常、要素の最も単純な (最も一般的な) セレクターでアニメーションを定義し、追加のセレクターはそれから恩恵を受けます。

.my-box {
    width: 200px;
    height: 200px;
    background: red;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    transition: all 200ms ease;
}

.my-box.hover {
    width: 400px;
}
于 2013-11-01T17:13:00.710 に答える