2

css ドロップダウン メニューにトランジション効果を追加しようとしていますが、どこにトランジション コードを配置しても機能しないようです。

transition: all 2s ease-in;

イベントが突然発生しないように、実際のドロップダウンulの親liのホバーでフェードインおよびフェードアウトする遷移を取得しようとしています。

jsfiddle: http://jsfiddle.net/JazParkyn/6jshy/5/

4

4 に答える 4

5

displayプロパティを移行することはできません。opacityドロップダウン メニューに使用してみてください。

nav ul ul {
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    -ms-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
}
nav ul li:hover > ul {
    visibility: visible;
    opacity: 1;
}

デモを参照してください。

于 2013-05-14T14:43:34.507 に答える
0

フィドル：ここ

トランジションを間違えました。nav ul li有効にするにはオンにする必要があります。また、私が追加したいくつかの Webkit を見逃しているかもしれません。

//アップデート

于 2013-05-14T14:41:16.900 に答える
0

を移行して、代わりにandをdisplay使用することはできません。visibilityopacity

nav ul ul {
    visibility: hidden; /* fallback for old browsers */
    opacity: 0;
    transition: all 2s ease-in;
}

nav ul li:hover > ul {
    visibility: visible;
    opacity: 1;
}

ここにデモがあります。

トランジションを にのみ適用するopacity場合は、指定する必要があるvisibilityため、少し複雑になります。

nav ul ul {
    visibility: hidden;
    opacity: 0;
    transition: opacity 2s 0s ease-in, visibility 0s 2s;
}

nav ul li:hover > ul {
    visibility: visible;
    opacity: 1;
    transition: opacity 2s 0s ease-in, visibility 0s 0s;
}

ここにデモがあります。

于 2013-05-14T14:43:25.503 に答える
0

フィドル：ここ

ドロップダウンメニューにエフェクトを追加しましたa:hover。遅延などを変更できます...

于 2013-05-14T14:43:34.400 に答える