19

-webkit-transitionで使用する方法はありdisplayますか？

私は CSSdisplayを使用して、ナビゲーションの第 2 レベルを表示および非表示にしています…しかしdisplay: none、display: blockオンのみ:hoverは少し魅力的ではありません…aeaseは素晴らしいでしょう (のように-webkit-transition: display 300ms ease-in;)

jQueryでこれを行うのはかなり簡単ですが、私は現在CSS3ですべてをセットアップしようとしています(私は知っています:すべてのブラウザーがそれをサポートしているわけではありませんが、それは私が現在取り組んでいるこの1つのプロジェクトには関係ありません)

ここにいくつかのコードと構造があります: ( にli.menu1は:hoverwithがありますsection.nav-menu1 {display: block;})

<ul>
    <li class="menu1"><a href="#">Menu 1</a>
        <section class="nav-menu1">
            <h1 class="none">Level 2 Overlay</h1>
            <nav>
                <h2 class="none">Menu 1 Navigation</h2>
                <ul>
                    <li><a href="#">Menu 1 Level 2-1</a></li>
                    <li><a href="#">Menu 1 Level 2-2</a></li>
                    <li><a href="#">Menu 1 Level 2-3</a></li>
                </ul>
            </nav>
        </section>
    </li>
</ul>
4

4 に答える 4

19

そのため、ここにすべてのピースがまとめられているかどうかはわかりません。不透明度と可視性をアニメーション化する必要があります。可視性には遅延があり、不透明度がトリガーされる前に行われます。

opacity: 0;
-moz-transition: opacity .25s linear, visibility .1s linear .5s;
-webkit-transition: opacity .25s linear, visibility .1s linear .5s;
-o-transition: opacity .25s linear, visibility .1s linear .5s;
transition: opacity .25s linear, visibility .1s linear .5s;
visibility: hidden;

に

opacity: 1;
visibility: visible;

可視性は 0.5 秒待ってから、非表示に切り替わります。両方の方向にフェードさせたい場合は、片側の可視性トランジションをオフにすることもできます. (そのため、フェードインすると、0.5 秒待って遷移するのではなく、要素が即座に表示されます。)

于 2011-03-08T04:26:12.110 に答える
13

第2レベルのメニューを表示および非表示にするには、を使用heightまたは遷移する必要があります。プロパティはトランジションではサポートされていません。widthDisplay

ODCには、あなたのニーズに似た記事があります。また、メニュー項目のように見えるように少し変更しました。Firefox 3.6.12ではトランジションなしで、Opera 10.7で完璧に動作し、Chrome7.0.517.41ではまったく動作しません。

これがあなた自身のアニメーションメニューの出発点として役立つことを願っています。

更新1： 簡単に移行できるメニュー。おそらく、その構造に何か問題があります。問題は、トランジションがで機能しないことautoです。そのため、最終的な高さを手動で指定する必要があります。

更新2： 遷移プロパティとして不透明度を使用します。非表示の要素では、visibility：hiddenとvisibility：visibleonvisibleを設定します。これにより、クリック可能なリンクが非表示になるのを防ぐことができます。また、可視-不可視遷移は機能しません。理由はわかりません。それからもっと働かなければなりません。

例。

于 2010-11-15T05:10:53.900 に答える
0

これには、表示遷移ではなく、不透明度遷移を使用する必要があります。Display:none は、要素をレイアウトから完全に削除します - そこに要素を入れたいと思いますが、見えないようにします。

于 2010-11-14T17:25:39.170 に答える
-2

を使用するoverflow:hidden > overflow:visibleと、よりうまく機能します。私は次のように使用します。

example {
 #menu ul li ul {

    background-color:#fe1c1c;
    width:85px;
    height:0px;
    opacity:0;
    box-shadow:1px 3px 10px #000000;
    border-radius:3px;
    z-index:1;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.6s ease;

}

 #menu ul li:hover ul  {

        overflow:visible;
    opacity:1;
    height:140px;
}

overflow:hiddenのように動作するため、目に見えるよりも優れていますdisplay:none。

于 2012-09-09T01:52:38.997 に答える