3

これを重複としてフラグ付けしないでください。私はどちらを使用するのが良いかを尋ねているわけではありません。先日、スライド アウト ナビゲーション バーを作成し、jQuery を使用しslideToggle()てアニメーションを機能させました。CSSトランジションを使ってみたのですが、みじめに失敗しました。問題は、jQuery (または JS 自体) を使用せずに、トランジションでその効果 (正確には JSfiddle への効果) を得ることができるかということです。もしそうなら、どのように？

4

3 に答える 3

3

確かにそうですが、この方法を使用すると、top最初にポジションをいじる必要があります (マイナスです) 。

重要な部品

#nav li ul {
    position: absolute;
    margin-left: -1px;
    list-style: none;
    padding: 0;
    top: -245px;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
}

#nav li:hover ul {
    visibility: visible;
    display:block;
    top: 45px;
    z-index:-999; /* This is to make the menu be behind the nav bar*/
}

#nav li ul:hover {
    display: block;
}

デモ

また、スライド効果の簡略化されたバージョンについては、こちらをご覧ください。

于 2012-06-13T16:14:27.223 に答える
2

はい、可能です (例: http://jsfiddle.net/DvVLw/3/ )。たとえば、アイテムの高さが最初に設定されて0いて、サブメニューごとに、アニメーションの最後に到達する正確な高さを指定した場合、 CSS3 アニメーションは (まだ)autoキーワードを使用できないため (したがって、 から0へのアニメーションautoは不可能です)。

もちろん、メニューが動的であり、含まれる項目の数が事前にわからない場合、高さを判断するのは困難です

于 2012-06-13T16:11:55.213 に答える