-webkit-Übergang mit Display

Question

Gibt es eine Möglichkeit zur Verwendung -webkit-transition mit display?

Ich bin mit CSS display zu verstecken und zeigen ein Navigations zweite Ebene ... aber nur display: none und display: block auf :hover ist ein wenig un-sexy ... ein ease wäre toll (wie -webkit-transition: display 300ms ease-in;)

Ich weiß, das ist ziemlich einfach, dies mit jQuery zu tun, aber ich versuche gerade Setup alles mit CSS3 (ich weiß: nicht alle Browser es unterstützen, aber das ist irrelevant für diese ein Projekt, das ich gerade arbeite)

hier einige Code & Struktur: (die li.menu1 eine :hover mit section.nav-menu1 {display: block;} hat)

<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>

Answer 1

Sie sollten height oder width Übergang verwenden, um zu zeigen, und die zweite Ebene Menü auszublenden. Display Eigenschaft wird nicht durch Übergänge unterstützt.

Es gibt einen Artikel unter ODC mit etwas ähnliches auf Ihre Bedürfnisse. Außerdem habe ich geändert es ein bisschen um mehr wie Menüpunkt zu suchen. Funktioniert perfekt in Opera 10.7, ohne Übergänge in Firefox 3.6.12 und gar nicht in Chrome 7.0.517.41.

Ich hoffe, das als Startpunkt von Nutzen sein wird für Ihr eigenes animierte Menü.

Update 1: Ihr Menü mit Leichtigkeit in Transitionen . Wahrscheinlich habe ich etwas falsch über sie die Struktur bekommt. Das Problem ist, dass Übergänge funktionieren nicht mit auto, so dass Sie manuell müssen endgültige Höhe angeben.

Update 2: Verwenden Opazität als Übergangseigenschaft. Auf unsichtbares Element Set Sichtbarkeit: versteckt und Sichtbarkeit: sichtbar sichtbar. Das wird von unsichtbaren anklickbare Links zu verhindern. Auch im sichtbaren unsichtbaren Übergang funktioniert nicht, weiß nicht, warum. Müssen Arbeit es om.

Beispiel .

Answer 2

Also ich bin nicht sicher, sehe ich alle die Stücke hier zusammen. Sie wollen belebtes Opazität und Transparenz, mit Sicht eine Verzögerung so Opazität getan wird, bevor es auslöst;

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;

Sichtbarkeit wird .5s warten und dann versteckt wechseln. Sie können sogar die Sichtbarkeit Übergang auf den einer Seite deaktivieren, wenn Sie es in beiden Richtungen verblassen wollen. (So ??dass, wenn in Fading, das Element sofort sichtbar statt .5s und transitioning warten.)

Answer 3

Sie sollten einen Opazität Übergang verwenden, keine Display Übergang für diesen. Display: none entfernt ein Element aus dem Layout ganz - ich glaube, Sie dort wollen, aber unsichtbar

.

Answer 4

Mit overflow:hidden > overflow:visible, funktioniert besser, ich wie folgt verwenden:

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;
}

ist besser als sichtbar, weil overflow:hidden wirkt genau wie ein display:none,