web-dev-qa-db-ja.com

-webkit-transition with display

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

CSS displayを使用してナビゲーションの第2レベルを非表示および表示しています…しかし、display: noneのdisplay: blockと:hoverだけが少し魅力的ではありません…easeはすばらしい（-webkit-transition: display 300ms ease-in;など）

JQueryでこれを行うのはかなり簡単ですが、現在CSS3ですべてを設定しようとしています（知っている：すべてのブラウザーがサポートしているわけではありませんが、現在取り組んでいるこの1つのプロジェクトには関係ありません）。

ここにいくつかのコードと構造があります：（li.menu1には:hoverと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>
csswebkitcss-transitions
19
albuvee

セカンドレベルメニューの表示と非表示を切り替えるには、heightまたはwidthトランジションを使用する必要があります。 Displayプロパティは、遷移ではサポートされていません。

[〜＃〜] odc [〜＃〜] にあなたのニーズに 似たようなもの の記事があります。また、メニュー項目のように見えるように 少し変更した を追加しました。 Opera 10.7、Firefox 3.6.12では移行なしで完全に機能し、Chrome 7.0.517.41ではまったく機能しません。

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

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

Update 2：遷移プロパティとして不透明度を使用します。非表示の要素では、visibility：hiddenおよびvisibility：visibleを可視に設定します。それは目に見えないクリック可能なリンクを防ぎます。また、表示と非表示の切り替えが機能しません。理由はわかりません。もっとそれを働かなければならない。

例 。

13
Klaster_1

だから、ここにすべてのピースがまとめられているのがよくわかりません。不透明度と可視性をアニメーション化し、可視性に遅延を設定して、トリガー前に不透明度が実行されるようにします。

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秒待機して遷移するのではなく、即座に表示されます。）

19
Bob Spryn

このための表示遷移ではなく、不透明遷移を使用する必要があります。 Display：noneは、レイアウトから要素を完全に削除します-そこに配置したいのですが、表示されません。

0
Michael Mullany