-Webkit-Übergang mit Display

Gibt es eine Möglichkeit zu nutzen -webkit-transition mit display?

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

Ich weiß, das ist ziemlich einfach, dies zu tun mit jQuery, aber ich bin gerade dabei, das setup alles mit CSS3 (ich weiß: nicht alle Browser unterstützen es, aber das ist irrelevant für dieses Projekt bin ich derzeit in Arbeit)

hier einige code & Struktur: (der li.menu1 hat eine :hover mit 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>

InformationsquelleAutor der Frage albuvee | 2010-11-14

13

Sollten Sie verwenden height oder width übergang, um ein-und ausblenden der zweiten Ebene-Menü. Display - Eigenschaft wird nicht unterstützt übergänge.

Gibt es einen Artikel bei ODC mit etwas ähnliches auf Ihre Bedürfnisse. Außerdem habe ich Sie ein bisschen verändertum zu schauen mehr wie der Menüpunkt. Funktioniert perfekt in Opera 10.7, ohne übergänge in Firefox 3.6.12 und überhaupt nicht in Chrome 7.0.517.41.

Ich hoffe, dies wird nützlich sein, als Startpunkt für Ihre eigenen animierten Menü.

Update 1:
Ihr Menü mit Leichtigkeit-übergänge. Wahrscheinlich habe ich etwas falsch über seine Struktur. Das problem ist, dass die übergänge funktionieren nicht mit autoso müssen Sie manuell festlegen, dass die endgültige Höhe.

Update 2:
Verwenden Sie die Deckkraft-als transition-Eigenschaft. Auf unsichtbare element set visibility:hidden und Sichtbarkeit:sichtbar auf sichtbar. Das wird verhindern, dass die von unsichtbaren klickbare links. Auch, sichtbar-unsichtbaren übergang nicht funktioniert, weiß nicht warum. Haben, mehr zu arbeiten om.

Beispiel.

InformationsquelleAutor der Antwort Klaster_1
19

So, ich bin mir nicht sicher, ich sehe all die Stücke zusammen hier. Sie möchten zu animieren Deckkraft und Sichtbarkeit mit der Sichtbarkeit mit einer Verzögerung, so dass die Deckkraft wird gemacht, 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;
```
zu
```
opacity: 1;
visibility: visible;
```
Sichtbarkeit zu warten .5s und wechseln Sie dann über zu versteckt. Sie können sogar schalten Sie die Sichtbarkeit der übergang auf der einen Seite, wenn Sie es wollen, zu verblassen, in beide Richtungen. (So dass beim einblenden wird, wird das element sofort sichtbar, anstatt zu warten .5s und den übergang.)

InformationsquelleAutor der Antwort Bob Spryn
0

Sollten Sie eine Deckkraft übergang, nicht ein display übergang. Display:none entfernt das element aus dem layout ganz - ich denke, Sie wollen es da, aber unsichtbar.

InformationsquelleAutor der Antwort Michael Mullany

-2

Verwenden overflow:hidden > overflow:visible , die besser funktioniert, verwende ich gerne diese:

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

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

InformationsquelleAutor der Antwort jesus

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.