Suche nach einer eleganten, reinen CSS-Methode zum Ausblenden/Anzeigen von Inhalten mit automatischer Höhe (mit Übergängen)

Lesezeit: 8 Minuten

Benutzer-Avatar
Leifparker

Ich hätte gerne eine Methode, die nur CSS-Übergänge verwendet, um Inhalte beim Hover effektiv (und attraktiv) zu verstecken / anzuzeigen.

Die Einschränkung ist, dass ich die dynamische (automatische) Höhe beibehalten möchte.

Es scheint, dass die optimale Route der Übergang zwischen a wäre fixed height:0zu einem height:autoaber leider wird dies noch nicht von Übergängen in Browsern unterstützt.

Eine Klarstellung als Antwort auf die Kommentare :: Dies ist weniger eine Frage des Wartens, bis alle lebenden Browser CSS3-kompatibel sind, sondern vielmehr das Beheben eines wahrgenommenen Mangels von CSS3 selbst (z. B. das Fehlen von height:0 > height:auto)

Ich habe ein paar andere Möglichkeiten untersucht, die auf der folgenden Geige eingesehen werden können (und unten näher erläutert werden), aber keine davon stellt mich zufrieden, und ich würde mich über Feedback/Tipps für andere Ansätze freuen.

http://jsfiddle.net/leifparker/PWbXp/1/

Basis-CSS

.content{
    -webkit-transition:all 0.5s ease-in-out;  
    -moz-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
    overflow:hidden;
}


Variante Nr. 1 – Der Max-Height-Hack

.content { max-height:0px; }
.activator:hover +.content{ max-height:2000px; }

Nachteile

a. Sie müssen willkürlich einen oberen Wert festlegen maximale Höhedie bei umfangreichen dynamischen Inhalten möglicherweise Informationen abschneiden könnte.

b. Wenn vorsichtshalber (a), greifen Sie auf die Einstellung a zurück sehr hoher Schaft maximale Höhe, wird die Verzögerung bei der Animation umständlich und unhaltbar, da der Browser unsichtbar die gesamte Distanz übergeht. Macht das Easing auch optisch weniger effektiv.


Variation Nr. 2 – Polsterung und die Illusion des Wachstums

.content { padding:0px; height:0px; opacity:0; }
.activator:hover +.content { padding:10px 0px; height:auto; opacity:1; }

Nachteile

a. Es ist erschütternd. Es ist definitiv etwas besser, als den Inhalt einfach aus dem Nichts herauszuholen, und der Effekt wird durch den Übergang der Deckkraft weiter verkauft, aber insgesamt ist es optisch nicht so schick.


Variante Nr. 3 – Der Ansatz mit fehlerhafter Breite

.content { width:0%; }
.activator:hover +.content{ width:100%; }

Nachteile

a. Wenn die Breite schrumpft, zwingt der Zeilenumbruch zusätzlichen Text in nachfolgende Zeilen, und wir erhalten am Ende ein superhohes, unsichtbares Div, das immer noch Platz beansprucht.


Variante Nr. 4 – Die effektive, aber nervöse Schriftgröße

.content {  font-size:0em; opacity:0; }
.activator:hover +.content{  font-size:1em; opacity:1; }

Nachteile

a. Während dies einen netten, geschwungenen Effekt hat, verursacht die Verschiebung des Zeilenumbruchs mit zunehmender Schriftgröße ein unschönes Zittern.

b. Dies funktioniert nur für Inhalte, die aus Text bestehen. Andere Übergänge müssten hinzugefügt werden, um die Skalierung von Eingaben und Bildern zu verwalten, und obwohl dies durchaus möglich ist, würde dies die Einfachheit untergraben.


Variation #5 – Die Butterigkeit der Zeilenhöhe

.content { line-height:0em; opacity:0; }
.activator:hover +.content{ line-height:1.2em; opacity:1; }

Nachteile

a. Ästhetisch mein Favorit, aber wie bei Nr. 4 funktioniert dies am einfachsten mit Nur-Text-Inhalten.


Variation #6 – The Anti-Margin (wie von @graphicdivine angeboten)

.wrapper_6 { min-height: 20px }
.wrapper_6 .activator {z-index:10; position: relative}
.wrapper_6 .content { margin-top: -100%; }
.wrapper_6 .activator:hover +.content{ margin-top: 0 }

Nachteile

a. Es gibt eine Verzögerung beim Schweben, die nicht optimal ist. Dies ist das Ergebnis der .content unsichtbar ziemlich weit oben auf dem Bildschirm versteckt zu sein und sich Zeit zu nehmen, um nach unten zu animieren, bevor er erscheint.

b. Das margin-top: -100% ist relativ zur Breite des enthaltenden Elements. Bei fließenden Designs besteht also die Möglichkeit, dass, wenn das Fenster ziemlich klein geschrumpft ist, die margin-top wird nicht ausreichen, um die zu halten .content versteckt.


Wie ich schon sagte, wenn wir nur zwischen ihnen wechseln könnten height:0 und height:autodas wäre alles strittig.

Bis dahin irgendwelche Vorschläge?

Vielen Dank! Leif

  • Was ist der Nachteil der Verwendung von JS in dieser Situation?

    – Kugeln

    27. September 2011 um 17:11 Uhr

  • Ha! Um den sprichwörtlichen Bergsteiger zu zitieren, “weil es da ist”. — Ich denke, es fühlt sich einfach so an, als ob es elegant machbar sein sollte, und ein Wunsch nach der Einfachheit davon.

    – leifparker

    27. September 2011 um 17:44 Uhr


  • Durch die Verwendung von Javascript vermeiden Sie wahrscheinlich einige Cross-Browser- und Abwärtskompatibilitätsprobleme. Da viele Webseiten heutzutage jQuery verwenden, denke ich nicht, dass es schaden wird, es zu verwenden. Ich denke, es ist am besten zu warten, bis mehr Leute Browser verwenden, die css3 unterstützen :). In Bezug auf Vorschläge scheint es, als hätte ich nicht wirklich eine Ergänzung zu Ihrem Beitrag.

    – JNDPNT

    28. September 2011 um 8:23 Uhr

  • Nur weil du es kannst, heißt das nicht, dass du es solltest 🙂

    – CheckRaise

    28. September 2011 um 14:48 Uhr

  • @DA. Ich denke, ich stimme dem Gefühl zu, mit Ausnahme des Gedankens, dass JS Höhenberechnungen durchführen sollte. Der Browser verarbeitet dies bereits nativ (height : auto) und es scheint ein so unangenehmes Versehen zu sein, dass die Verwendung von CSS-Übergängen für diesen Zweck bedeutet, diese native Leichtigkeit zu verwerfen.

    – leifparker

    5. Oktober 2011 um 15:51 Uhr

Versuche dies, Die Antimarge:

.wrapper_6 { min-height: 20px }
.wrapper_6 .activator {z-index:10; position: relative}
.wrapper_6 .content { margin-top: -100%; }
.wrapper_6 .activator:hover +.content{ margin-top: 0 }

http://jsfiddle.net/PWbXp/

  • Oh! Ich mag das. Meine einzige Sorge ist, dass es beim Rollover zu einer leichten Verzögerung kommt, da der Inhalt so lange braucht, bis er unter dem „Aktivator“ erscheint. spielt sich nicht gut mit Ease-in. Ansonsten sehr gut.

    – leifparker

    29. September 2011 um 15:21 Uhr

  • Nach einigem Testen wird jetzt klar, dass die Verzögerung eigentlich daran liegt .content ist sehr weit oben auf der Seite versteckt. Das margin:-100% ist eigentlich zu willkürlich, da es sich auf die Breite des enthaltenden Elements bezieht (nicht auf seine eigene Höhe). Dies wäre (ist) besonders problematisch bei Fluid-Designs, da die Breite des Behälters weit genug schrumpfen kann, um den „Anti-Rand“ zu drücken .content in sichtbare Bereiche. Hier dargestellt: jsfiddle.net/leifparker/PWbXp/1 (Versuchen Sie, Ihre Fensterbreite zu verkleinern, und Sie können sehen, dass das Beispiel „Anti-Marge“ fehlschlägt). Drat. Trotzdem danke!

    – leifparker

    30. September 2011 um 17:56 Uhr

  • Ich denke, ein bisschen Spiel mit den Box-Größenregeln sollte einige dieser Probleme beheben …?

    – Niels Keurentjes

    12. April 2013 um 19:33 Uhr

Benutzer-Avatar
Vitox

Nun … Ich weiß, es ist eine Weile her, aber ich musste eine Höhenanimation verwenden und glaube, dass viele andere Programmierer dies noch brauchen oder / und tun müssen.

Also bin ich hierher gekommen, weil ich Modusdetails einer Produktbeschreibung in einer Zellentabelle anzeigen musste, wenn der Benutzer die Zelle bewegt. Ohne Benutzer-Hovering werden nur maximal 2 Beschreibungszeilen angezeigt. Sobald der Benutzer darüber schwebt, müssen alle Zeilen (Text kann zwischen 1 und 8 Zeilen lang sein, dynamisch und unvorhersehbar lang sein) mit einer Art Höhenanimation angezeigt werden.

Ich komme in das gleiche Dilemma und entscheide mich für den Übergang von maximaler Höhe (einstellen einer hohen maximalen Höhe, von der ich mir sicher war, dass sie meinen Text nicht schneidet), weil dieser Ansatz für mich die sauberste Lösung zu sein scheint das zu animieren Höhe.

Aber ich konnte mit der Verzögerung bei der „Nach oben schieben“-Animation nicht zufrieden sein, genau wie Sie.
Dann habe ich hier einen Kommentar zur Übergangskurve gefunden: http://css3.bradshawenterprises.com/animating_height/ .

Die Idee dieses Typen ist brillant, aber allein diese Lösung “schneidet” den Effekt der “slide down”-Animation ab. Also denke ich ein wenig nach und komme zu einer endgültigen Lösung.

Hier ist also meine Lösung mit der Idee von Rhys (Typ des Links oben):

Slide-Down-Animation (Hover), mit einem “glatt wachsen” und Slide-Up-Animation ohne (virtuell) “Verzögerung“:

div {
  background-color: #ddd;
  width: 400px;
  overflow: hidden;
  -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  max-height: 38px;
}
div:hover {
  -webkit-transition: max-height 2s ease;
  -moz-transition: max-height 2s ease;
  transition: max-height 2s ease;
  max-height: 400px;
}
<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac lorem ante. Vestibulum quis magna pretium, lacinia arcu at, condimentum odio. Ut ultrices tempor metus, sit amet tristique nibh vestibulum in. Pellentesque vel velit eget purus mollis
  placerat sed sit amet enim. Sed efficitur orci sapien, ac laoreet erat fringilla sodales.
</div>

Hier ist ein einfaches JsFiddle

Und hier ist dein JsFiddle aktualisiert (in der Tat ein Stück davon)

Dies ist (meiner Meinung nach) eine perfekte Lösung für Menüs, Beschreibungen und alles, was nicht extrem unvorhersehbar ist, aber wie Sie bereits gesagt haben, besteht die Notwendigkeit, eine hohe maximale Höhe einzurichten, und kann überraschend hoch abgeschnitten werden dynamische Inhalte. In dieser speziellen Situation verwende ich stattdessen jQuery/JavaScript, um die Höhe zu animieren. Da die Aktualisierung des Inhalts bereits mit einer Art JavaScript durchgeführt wird, kann ich keinen Schaden darin sehen, einen Js-Ansatz für die Animation zu verwenden.

Hoffe, ich habe jemandem da draußen geholfen!

  • Das ist ziemlich ordentlich! Ich habe Ihr Snippet in ein lauffähiges Stack Snippet eingefügt; Sie müssen sich nicht nur auf den Fiddle-Link für die Demo verlassen 🙂

    – MisterManSam

    5. Januar 2015 um 7:32 Uhr


  • Danke @misterManSam! Und danke für das Stack Snippet, ich kannte die Funktion von StackOverflow nicht … Das liebe ich hier, Sie lernen etwas Neues in Ihrer eigenen Antwort! 🙂

    – Vitox

    5. Januar 2015 um 12:31 Uhr


Sie sollten scaleY verwenden.

HTML:

<p>Here (scaleY(1))</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

CSS:

ul {
    background-color: #eee;
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.26s ease;
}

p:hover ~ ul {
    transform: scaleY(1);
}

Ich habe eine herstellerpräfixierte Version des obigen Codes auf jsfiddle erstellt, http://jsfiddle.net/dotnetCarpenter/PhyQc/9/

  • Das Problem bei dieser Methode ist, dass der Platz, den das Element einnehmen soll, wenn es sich in voller Höhe befindet, immer noch belegt ist. Sie können dies also nicht verwenden, wenn Sie beispielsweise ein zusammenklappbares Menü erstellen.

    – Dzulqarnain Nasir

    3. Oktober 2013 um 12:00 Uhr

1179320cookie-checkSuche nach einer eleganten, reinen CSS-Methode zum Ausblenden/Anzeigen von Inhalten mit automatischer Höhe (mit Übergängen)

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy