Frage Übergänge auf dem Display: Eigenschaft


Ich entwerfe gerade eine Art "Mega Dropdown" -Menü von CSS - im Grunde ein normales CSS-Dropdown-Menü, aber eines, das verschiedene Arten von Inhalten enthält.

Im Augenblick, Es scheint, dass CSS3-Übergänge nicht auf die Eigenschaft "display" angewendet werden, d. h. Sie können keinen Übergang von display: none zu display: block (oder irgendeine Kombination).

Kann jemand eine Möglichkeit für das Menü der zweiten Ebene aus dem obigen Beispiel vorstellen, "einzublenden", wenn jemand über einen der obersten Menüpunkte schwebt?

Ich bin mir bewusst, dass Sie Übergänge auf dem verwenden können visibility: Eigentum, aber ich kann mir keinen Weg vorstellen, das effektiv zu nutzen.

Ich habe auch versucht, Höhe zu verwenden, aber das ist einfach kläglich gescheitert.

Mir ist auch bewusst, dass es mit JavaScript einfach ist, dies zu erreichen, aber ich wollte mich selbst dazu herausfordern, nur CSS zu verwenden, und ich denke, dass ich etwas zu kurz komme.

Alle und alle Vorschläge sind sehr willkommen.


1070
2017-07-25 22:52


Ursprung


Antworten:


Sie können zwei oder mehr Übergänge verketten und visibility ist, was dieses Mal nützlich ist.

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}
<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

(Vergessen Sie nicht die Anbieter - Präfixe zum transition Eigentum)

Weitere Details sind in Dieser Artikel


1023
2017-08-04 14:58



Sie müssen das Element auf andere Weise verstecken, um dies zum Laufen zu bringen.

Ich habe den Effekt erreicht, indem ich beides positioniert habe <div>s absolut und den versteckten zu setzen opacity: 0.

Wenn Sie sogar die display Eigentum von none zu block, Ihr Übergang auf andere Elemente wird nicht auftreten.

Um dies zu umgehen, lassen Sie das Element immer zu display: block, aber verstecken Sie das Element, indem Sie eines dieser Mittel einstellen:

  1. Stellen Sie das ein height zu 0.
  2. Stellen Sie das ein opacity zu 0.
  3. Positionieren Sie das Element außerhalb des Rahmens eines anderen Elements mit overflow: hidden.

Es gibt wahrscheinlich mehr Lösungen, aber Sie können keinen Übergang durchführen, wenn Sie das Element auf wechseln display: none. Beispielsweise können Sie versuchen, etwas wie folgt zu versuchen:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0; 
}
div.active {
    opacity: 1;
    display: block;
}

Aber das wird nicht Arbeit. Aus meiner Erfahrung habe ich festgestellt, dass dies nichts bewirkt.

Aus diesem Grund müssen Sie immer das Element behalten display: block - Aber du konntest es umgehen, indem du so etwas tust:

div {
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

660
2017-07-26 04:20



Zum Zeitpunkt dieses Posts deaktivieren alle gängigen Browser CSS-Übergänge, wenn Sie versuchen, die display Eigenschaft, aber CSS-Animationen funktionieren immer noch gut, so dass wir sie als Workaround verwenden können.

Beispielcode: -   (Sie können es entsprechend auf Ihr Menü anwenden) Demo

Fügen Sie Ihrem Stylesheet das folgende CSS hinzu:

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

Dann bewirb die fadeIn Animation zum Kind beim Eltern-Hover: - (und natürlich gesetzt display: block)

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

203
2018-02-17 19:25



Ich vermute, dass die Grund Dass Übergänge deaktiviert sind, wenn "display" geändert wird, hängt davon ab, was das Display tatsächlich tut. Es tut nicht Ändern Sie alles, was möglicherweise reibungslos animiert werden könnte.

"Display: none;" und "visibility: hidden;" sind zwei vollständig verschiedene Dinge. Beide haben den Effekt, dass das Element unsichtbar wird, aber mit "visibility: hidden" wird es immer noch im Layout dargestellt, aber eben nicht sichtbar damit. Das ausgeblendete Element benötigt immer noch Platz und wird immer noch inline oder als Block oder Block-Inline oder Tabelle oder was auch immer das Element "display" als Render-Element angibt, und nimmt entsprechend Speicherplatz ein. Andere Elemente tun es nicht Automatisch bewegen, um diesen Raum zu besetzen. Das ausgeblendete Element rendert seine tatsächlichen Pixel nicht zur Ausgabe.

"Display: none" auf der anderen Seite tatsächlich verhindert das Element vom Rendern vollständig. Es nimmt nicht auf irgendein Bauraum. Andere Elemente, die den gesamten oder einen Teil des von diesem Element belegten Platzes belegt hätten, passen sich nun diesem Raum an, als ob das Element einfach wäre gab es überhaupt nicht.

"Anzeige" ist nicht nur ein anderes visuelles Attribut. Es stellt den gesamten Rendering-Modus des Elements ein, z. B. ob es ein Block, Inline, Inline-Block, Tabelle, Tabellenzeile, Tabellenzelle, Listenelement oder was auch immer ist! Jeder von diesen hat sehr unterschiedliche Layout-Verzweigungen, und es gäbe keinen vernünftigen Weg, sie zu animieren oder reibungslos zu überführen (versuchen Sie sich zum Beispiel einen fließenden Übergang von "Block" zu "Inline" oder umgekehrt!).

Aus diesem Grund sind Übergänge deaktiviert, wenn sich die Anzeige ändert (selbst wenn die Änderung von oder zu "keine" ist - "keine" ist nicht nur unsichtbar, es ist ihr eigener Element-Rendermodus, der überhaupt kein Rendering bedeutet!),


54
2018-06-15 18:55



display ist nicht eine der Eigenschaften, an denen der Übergang arbeitet.

Sehen http://www.w3.org/TR/css3-transitions/#animatable-properties- für die Liste der Eigenschaften, auf die Übergänge angewendet werden können.


41
2017-09-22 23:24



Ich weiß, dass dies eine sehr alte Frage ist, aber für Leute, die sich diesen Thread ansehen, können Sie der Block-Eigenschaft jetzt eine benutzerdefinierte Animation hinzufügen.

@keyframes showNav {
  from {opacity: 0;}
  to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
  display: block;
  animation: showNav 250ms ease-in-out both;
}

Demo

In dieser Demo ändert sich das Untermenü von display:none zu display:block und schafft es immer noch zu verblassen.


28
2017-07-29 20:51



Gemäß W3C Working Draft 19. November 2013  display ist nicht ein animierbare Eigenschaft. Glücklicherweise, visibility ist animierbar. Sie können seinen Übergang mit einem Übergang der Opazität (JSFidel):

  • HTML:

    <a href="http://example.com" id="foo">Foo</a>
    <button id="hide-button">Hide</button>
    <button id="show-button">Show</button>
    
  • CSS:

    #foo {
        transition-property: visibility, opacity;
        transition-duration: 0s, 1s;
    }
    
    #foo.hidden {
        opacity: 0;
        visibility: hidden;
        transition-property: opacity, visibility;
        transition-duration: 1s, 0s;
        transition-delay: 0s, 1s;
    }
    
  • JavaScript zum Testen:

    var foo = document.getElementById('foo');
    
    document.getElementById('hide-button').onclick = function () {
        foo.className = 'hidden';
    };
    
    document.getElementById('show-button').onclick = function () {
        foo.className = '';
    };
    

Beachten Sie, dass wenn Sie den Link nur transparent machen, ohne zu setzen visibility: hidden, dann würde es klickbar bleiben.


17
2018-02-02 14:59