Wie kann ich den übergang height: 0; auf height: auto; Verwendung von CSS?

Verwenden max-height in der transformation und nicht height. Und legen Sie einen Wert auf max-height etwas größer als die box jemals bekommen.

Sehen JSFiddle demo zur Verfügung gestellt von Chris Jordan in einem anderen Antwort hier.

CSS:

#menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

HTML:

<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

Können Sie derzeit nicht animieren, auf die Höhe, wenn man von den Höhen beteiligt ist auto Sie haben zwei explizite Höhen.

Ich weiß, das ist die dreißig-somethingth Antwort auf diese Frage, aber ich denke, es lohnt sich, so hier geht. Dies ist ein CSS-nur Lösung mit den folgenden Eigenschaften:

• Es keine Verzögerung am Anfang, und der übergang nicht zu stoppen zu früh. In beide Richtungen (auf-und Zuklappen), wenn Sie einen übergang Dauer von 300ms in der CSS, dann dauert der übergang 300ms, Zeit.
• Es den übergang der tatsächlichen Höhe (im Gegensatz zu transform: scaleY(0)), so ist es nicht das richtige, wenn es Inhalte nach dem Reduzierbare element.
• Während (wie in anderen Lösungen) es sind Magische zahlen (z.B. "wählen Sie eine Länge, die größer ist als die box jemals zu werden"), es ist nicht tödlich, wenn Ihre Annahme endet als falsch. Der übergang kann nicht bezaubernd aus, in diesem Fall aber vor und nach dem übergang, das ist nicht ein problem: In der erweiterten (height: auto) Staat, der ganze Inhalt hat immer die richtige Höhe (im Gegensatz zu z.B., wenn Sie wählen Sie eine max-height stellt sich heraus, dass zu niedrig). Und im eingeklappten Zustand, die Höhe ist null, wie es sollte.

Demo

Hier ist eine demo mit drei zusammenklappbaren Elementen, die alle verschiedene Höhen, die alle verwenden die gleichen CSS. Sie möchten möglicherweise klicken Sie auf "ganze Seite" nach Klick auf "run snippet". Beachten Sie, dass das JavaScript nur schaltet die collapsed CSS-Klasse, es gibt keine Messgeräte beteiligt. (Sie könnten tun genau dieses demo ohne JavaScript durch die Verwendung einer checkbox oder :target). Beachten Sie auch, dass der Teil des CSS, das ist verantwortlich für den übergang ist ziemlich kurz, und die HTML-erfordert nur einen einzigen zusätzlichen wrapper-element.

JS:

$(function () {
  $(".toggler").click(function () {
    $(this).next().toggleClass("collapsed");
    $(this).toggleClass("toggled"); //this just rotates the expander arrow
  });
});

CSS:

.collapsible-wrapper {
  display: flex;
  overflow: hidden;
}
.collapsible-wrapper:after {
  content: '';
  height: 50px;
  transition: height 0.3s linear, max-height 0s 0.3s linear;
  max-height: 0px;
}
.collapsible {
  transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
  margin-bottom: 0;
  max-height: 1000000px;
}
.collapsible-wrapper.collapsed > .collapsible {
  margin-bottom: -2000px;
  transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1),
              visibility 0s 0.3s, max-height 0s 0.3s;
  visibility: hidden;
  max-height: 0;
}
.collapsible-wrapper.collapsed:after
{
  height: 0;
  transition: height 0.3s linear;
  max-height: 50px;
}

/* END of the collapsible implementation; the stuff below
   is just styling for this demo */

#container {
  display: flex;
  align-items: flex-start;
  max-width: 1000px;
  margin: 0 auto;
}  


.menu {
  border: 1px solid #ccc;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  margin: 20px;

  
}

.menu-item {
  display: block;
  background: linear-gradient(to bottom, #fff 0%,#eee 100%);
  margin: 0;
  padding: 1em;
  line-height: 1.3;
}
.collapsible .menu-item {
  border-left: 2px solid #888;
  border-right: 2px solid #888;
  background: linear-gradient(to bottom, #eee 0%,#ddd 100%);
}
.menu-item.toggler {
  background: linear-gradient(to bottom, #aaa 0%,#888 100%);
  color: white;
  cursor: pointer;
}
.menu-item.toggler:before {
  content: '';
  display: block;
  border-left: 8px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  width: 0;
  height: 0;
  float: right;
  transition: transform 0.3s ease-out;
}
.menu-item.toggler.toggled:before {
  transform: rotate(90deg);
}

body { font-family: sans-serif; font-size: 14px; }

*, *:after {
  box-sizing: border-box;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

</div>

Wie funktioniert es?

Gibt es in der Tat zwei übergänge daran beteiligt, dass dies geschieht. Einer von Ihnen übergänge der margin-bottom von 0px (im expandierten Zustand) zu -2000px im eingeklappten Zustand (ähnlich diese Antwort). Die 2000 hier ist die erste Magische Zahl, es basiert auf der Annahme, dass deine box nicht höher sein als diese (2000 Pixel scheint wie eine vernünftige Wahl).

Mithilfe der margin-bottom übergang allein selbst hat zwei Probleme:

• Wenn Sie tatsächlich haben eine box, die größer als 2000 Pixel ist, dann eine margin-bottom: -2000px nicht alles verstecken -- es werde sichtbar sein Zeug auch im reduzierten Fall. Dies ist ein kleineres Update, das wir später auch tun werden.
• Wenn die eigentliche box ist, sagen wir, 1000 Pixel hoch ist, und auch die Umstellung ist 300ms lang, dann die sichtbar übergang ist bereits vorbei, nach etwa 150 MS (oder, in die entgegengesetzte Richtung beginnt 150mm spät).

Befestigung dieser zweiten Ausgabe ist, wobei der zweite übergang, und dieser übergang konzeptionell Ziele der wrapper ist mindestens Höhe ("konzeptionell" da wir uns nicht wirklich mit der min-height - Eigenschaft für dieses; dazu später mehr).

Hier ist eine animation, die zeigt, wie die Kombination der unteren Rand-übergang mit der Mindesthöhe übergang, beide von gleicher Dauer, gibt uns eine kombinierte übergang von der vollen Höhe auf null Höhe, das dieselbe Dauer hat.

Die linke Leiste zeigt an, wie den negativen unteren Rand schiebt den unteren nach oben, die Verringerung der sichtbaren Höhe. Der Balken in der Mitte zeigt, wie die minimale Höhe gewährleistet, dass in der zerfallenden Fall, den übergang nicht zu Ende zu früh, und in der Erweiterung Fall, der übergang beginnt nicht zu spät. Der Rechte Balken zeigt, wie die Kombination von beiden bewirkt, dass die box, um den übergang von der vollen Höhe auf null Höhe, in der richtigen Menge Zeit.

Für mein demo ich mich eingelebt habe auf 50px als die oberen Mindesthöhe Wert. Dies ist der zweite Magische Zahl, und es sollte kleiner sein als das Feld' Höhe würde schon werden. 50px scheint angemessener als gut; es scheint unwahrscheinlich, dass Sie würde sehr oft wollen, dass ein element zusammenklappbar, dass nicht einmal 50 Pixel hoch in den ersten Platz.

Wie man sehen kann in der animation, der daraus resultierende übergang ist stetig, aber nicht differenzierbar -- in dem moment, wenn die minimale Höhe ist gleich der vollen Höhe angepasst, indem der untere Rand, gibt es eine plötzliche änderung in der Geschwindigkeit. Dies ist sehr Auffällig in der animation, da es verwendet eine lineare timing-Funktion für beide übergänge, und weil der ganze übergang ist sehr langsam. In dem konkreten Fall (mein demo-oben), der übergang dauert nur 300ms, und der untere Rand im übergang ist nicht linear. Ich habe gespielt, um mit einer Menge von verschiedenen timing-Funktionen für beide übergänge, und diejenigen, die am Ende hatte ich das Gefühl, Sie arbeitete am besten für die unterschiedlichsten Fälle.

Zwei Probleme zu lösen:

1. der Punkt von oben, wo die Boxen von mehr als 2000 Pixel Höhe nicht ganz verborgen im eingeklappten Zustand,
2. und das umgekehrte problem, wo in der nicht-hidden-Fall-Boxen, die weniger als 50 Pixel Höhe sind zu hoch, selbst wenn der übergang nicht ausgeführt werden, weil die minimale Höhe hält Sie auf 50 Pixel.

Wir lösen das erste problem, indem Sie das container-element ein max-height: 0 im reduzierten Fall mit einem 0s 0.3s übergang. Dies bedeutet, dass es nicht wirklich eine Umstellung, aber die max-height angewendet wird, mit einer Verzögerung; es gilt nur, sobald die übergangsphase vorbei ist. Damit dies korrekt funktioniert, benötigen wir auch, um eine numerische max-height für das Gegenteil, non-collapsed state. Aber anders als in den 2000px Fall, wo die Kommissionierung zu große Zahl ist, wirkt sich auf die Qualität des übergangs, in diesem Fall, es spielt wirklich keine Rolle. So können wir wählen Sie einfach eine Zahl, die so hoch ist, dass wir wissen, dass keine Höhe wird je eine diesem nahe kommen. Ich nahm eine million Pixel. Wenn Sie das Gefühl müssen Sie möglicherweise zur Unterstützung von Inhalten, von einer Höhe von mehr als einer million Pixel, dann 1) tut mir Leid, und 2) fügen Sie einfach ein paar Nullen.

Das zweite problem ist der Grund, warum wir uns nicht wirklich mit min-height für die minimale Höhe übergang. Stattdessen gibt es eine ::after pseudo-element in den container mit einem height dass die übergänge von 50px auf null. Dies hat die gleiche Wirkung wie ein min-height: Es wird nicht lassen Sie den Behälter unterschritten, was die Höhe der pseudo-element, das Sie aktuell hat. Aber da sind wir mit height, nicht min-height, wir können jetzt max-height (wieder einmal angewendet mit einer Verzögerung), um die pseudo-element die aktuelle Höhe auf null, sobald die übergangsphase vorbei ist, sicherzustellen, dass zumindest außerhalb der übergang, selbst kleine Elemente haben die richtige Höhe. Da min-height ist stärker als max-height, würde dies nicht funktionieren, wenn wir den container min-height statt des pseudo-Elements height. Genau wie die max-height im vorigen Absatz dieses max-height muss auch ein Wert für die gegenüberliegende Ende des übergangs. Aber wir können in diesem Fall wählen Sie nur die 50px.

Getestet in Chrome (Win, Mac, Android, iOS), Firefox (Win, Mac, Android), Edge, IE11 (mit Ausnahme des flexbox-layout-Problem mit meinem demo, ich wollte nicht stören, debugging), und Safari (Mac, iOS). Apropos flexbox, sollte es möglich sein, diese Arbeit zu machen, ohne flexbox; in der Tat, ich glaube, Sie könnte fast alles funktioniert im IE7 – außer der Tatsache, dass Sie nicht haben, CSS-übergänge, so dass es eine eher sinnlose übung.

Visual Abhilfe zu animieren Höhe mit CSS3 übergänge animieren die Polsterung statt.

Du nicht Recht bekommen, die full-wipe-Effekt, aber das Spiel mit den übergangs -, Dauer-und padding-Werte sollten erhalten Sie nah genug. Wenn Sie nicht wollen, um explizit festzulegen Höhe/max-Höhe, das sollte sein was du suchst.

div {
    height: 0;
    overflow: hidden;
    padding: 0 18px;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}
div.animated {
    height: auto;
    padding: 24px 18px;
}

http://jsfiddle.net/catharsis/n5XfG/17/ (riffed off stephband über jsFiddle)

Die akzeptierte Antwort, die funktioniert für die meisten Fälle, aber es funktioniert nicht gut, wenn Ihr div kann stark variieren in der Höhe — die animation Geschwindigkeit ist nicht abhängig von der tatsächlichen Höhe des Inhalts, und es Aussehen kann, abgehackt.

Dennoch können Sie die eigentliche animation mit CSS, aber müssen Sie die Verwendung von JavaScript zur Berechnung der Höhe der Elemente, anstatt zu versuchen, zu verwenden auto. Kein jQuery erforderlich ist, obwohl Sie möglicherweise ändern Sie das noch ein bisschen wenn Sie wollen-Kompatibilität (funktioniert in der neuesten version von Chrome :)).

JS:

window.toggleExpand = function(element) {
    if (!element.style.height || element.style.height == '0px') { 
        element.style.height = Array.prototype.reduce.call(element.childNodes, function(p, c) {return p + (c.offsetHeight || 0);}, 0) + 'px';
    } else {
        element.style.height = '0px';
    }
}

CSS:

#menu #list {
    height: 0px;
    transition: height 0.3s ease;
    background: #d5d5d5;
    overflow: hidden;
}

HTML:

<div id="menu">
    <input value="Toggle list" type="button" onclick="toggleExpand(document.getElementById('list'));">
    <ul id="list">
        <!-- Works well with dynamically-sized content. -->
        <li>item</li>
        <li><div style="height: 100px; width: 100px; background: red;"></div></li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

Hartcodierte Werte.

Kein JavaScript.

Keine Annäherungen.

Der trick ist, verwenden Sie eine versteckte & dupliziert div man dem browser zu verstehen, was 100% bedeutet.

Diese Methode ist immer dann geeignet, wenn Sie sind in der Lage, duplizieren Sie das DOM des element Sie zu animieren.

CSS:

.outer {
  border: dashed red 1px;
  position: relative;
}

.dummy {
  visibility: hidden;
}

.real {
  position: absolute;
  background: yellow;
  height: 0;
  transition: height 0.5s;
  overflow: hidden;
}

.outer:hover>.real {
  height: 100%;
}

HTML:

Hover over the box below:
<div class="outer">
  <!-- The actual element that you'd like to animate -->
  <div class="real">
unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content
  </div>
  <!-- An exact copy of the element you'd like to animate. -->
  <div class="dummy" aria-hidden="true">
unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content
  </div>
</div>

Als ich diese post gibt es mehr als 30 Antworten schon, aber ich fühle, dass meine Antwort verbessert, die auf den bereits akzeptierte Antwort von jake.

Ich war nicht zufrieden mit der Frage, die sich stellt, einfach mit max-height - und CSS3-übergänge, da Sie so viele Kommentatoren angemerkt haben, müssen Sie Ihre max-height Wert sehr nahe an der tatsächlichen Höhe, oder du wirst eine Verzögerung. Sehen Sie diese JSFiddle ein Beispiel für dieses problem.

Dies zu umgehen, (während Sie immer noch kein JavaScript), ich fügte hinzu, ein anderes HTML-element, das die übergänge der transform: translateY CSS-Wert.

Dies bedeutet, dass sowohl max-height und translateY verwendet werden: max-height ermöglicht das element zu push-down-Elemente unter ihm, während translateY gibt die "sofortige" Wirkung, die wir wollen. Das Problem mit max-height noch vorhanden ist, aber seine Wirkung ist abgeschwächt.
Dies bedeutet, dass Sie festlegen können, eine viel größere Höhe für Ihr max-height Wert und sorgen weniger.

Den Allgemeinen Vorteil ist, dass auf den übergang zurück in (der Zusammenbruch), der Benutzer sieht die translateY animation sofort, also ist es eigentlich egal, wie lange die max-height nimmt.

Lösung als Fiddle

CSS:

body {
  font-family: sans-serif;
}

.toggle {
  position: relative;
  border: 2px solid #333;
  border-radius: 3px;
  margin: 5px;
  width: 200px;
}

.toggle-header {
  margin: 0;
  padding: 10px;
  background-color: #333;
  color: white;
  text-align: center;
  cursor: pointer;
}

.toggle-height {
  background-color: tomato;
  overflow: hidden;
  transition: max-height .6s ease;
  max-height: 0;
}

.toggle:hover .toggle-height {
  max-height: 1000px;
}

.toggle-transform {
  padding: 5px;
  color: white;
  transition: transform .4s ease;
  transform: translateY(-100%);
}

.toggle:hover .toggle-transform {
  transform: translateY(0);
}

HTML:

<div class="toggle">
  <div class="toggle-header">
    Toggle!
  </div>
  <div class="toggle-height">
    <div class="toggle-transform">
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
    </div>
  </div>
</div>

<div class="toggle">
  <div class="toggle-header">
    Toggle!
  </div>
  <div class="toggle-height">
    <div class="toggle-transform">
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
    </div>
  </div>
</div>

EDIT: Scrollen Sie nach unten, um aktualisierte Antwort

Ich war dabei, ein drop-down-Liste aus und sah diesen Beitrag ... viele verschiedene Antworten, aber ich entscheiden, zu teilen, mein drop-down-Liste zu, ... Es ist nicht perfekt, aber zumindest wird es mit nur css für die Dropdown! Ich habe mit transform:translateY(y) transformieren Sie die Liste, um die Ansicht ...

Sie können sehen, mehr in den test

http://jsfiddle.net/BVEpc/4/

Ich habe div hinter jedem li, weil mein drop-down-Liste aus, und zeigen Sie Ihnen, richtig, dies war notwendig, meine div-code:

#menu div {
    transition: 0.5s 1s;
    z-index:-1;
    -webkit-transform:translateY(-100%);
    -webkit-transform-origin: top;
}

schweben ist :

#menu > li:hover div {
    transition: 0.5s;
    -webkit-transform:translateY(0);
}

ist und da die ul-Höhe eingestellt ist, um die Inhalte bekommt, die er über Ihren Körper Inhalte, die ist, warum ich Tat dies für ul:

 #menu ul {
    transition: 0s 1.5s;
    visibility:hidden;
    overflow:hidden;
}

schweben:

#menu > li:hover ul {
     transition:none;
     visibility:visible;
}

zweiten mal nach transition-delay-und es wird ausgeblendet, nachdem mein drop-down-Liste geschlossen wurde animately ...

Hoffe noch jemand profitieren von dieser.

EDIT: ich kann einfach nicht glauben, dass die Leute tatsächlich mit diesem Prototyp! dieses Dropdown Menü ist nur für ein sub-Menü und das war ' s!!
Ich habe aktualisiert eine bessere haben kann, dass die beiden sub-Menü sowohl für ltr und rtl Richtungen mit IE-8-Unterstützung.

Fiddle für LTR

Fiddle für RTL

ich hoffe, jemand findet das nützlich in der Zukunft.

Flexbox-Lösung

Vorteile:

• einfach
• kein JS
• reibungslosen übergang

Nachteile:

• element muss in eine Feste Höhe flex-container

Die Weise, die es funktioniert, ist durch immer mit flex-basis: auto für das element mit Inhalt, und den übergang von flex-grow und flex-shrink statt.

Edit: Verbesserte JS-Fiddle inspiriert von der Xbox One-Oberfläche.

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: 0.25s;
  font-family: monospace;
}

body {
  margin: 10px 0 0 10px;
}

.box {
  width: 150px;
  height: 150px;
  margin: 0 2px 10px 0;
  background: #2d333b;
  border: solid 10px #20262e;
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
}

.space {
  flex-basis: 100%;
  flex-grow: 1;
  flex-shrink: 0;    
}

p {
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 1;
  background: #20262e;
  padding: 10px;
  width: 100%;
  text-align: left;
  color: white;
}

.box:hover .space {
  flex-grow: 0;
  flex-shrink: 1;
}
  
.box:hover p {
  flex-grow: 1;
  flex-shrink: 0;    
}

HTML:

<div class="box">
  <div class="space"></div>
  <p>
    Super Metroid Prime Fusion
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Resident Evil 2 Remake
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Yolo The Game
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Final Fantasy 7 Remake + All Additional DLC + Golden Tophat
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    DerpVille
  </p>
</div>

JS Fiddle

Hier ist ein Weg, um den übergang von einen beliebigen Startpunkt Höhe, einschließlich 0, auto (in voller Größe und flexibel), ohne dass die hard-code einstellen, der auf einer pro-Knoten-basis oder auf einer Benutzer-code zu initialisieren: https://github.com/csuwildcat/transition-auto. Dies ist im Grunde der Heilige Gral für das, was Sie wollen, ich glaube --> http://codepen.io/csuwldcat/pen/kwsdF. Nur schlagen das folgende JS-Datei in Ihre Seite, und alles, was Sie tun müssen, ist hinzufügen/entfernen einer einzelnen boolean-Attribut - reveal="" - aus den Knoten, die Sie möchten, zu erweitern und Vertrag.

Hier ist alles, was Sie tun müssen, wie der Benutzer, sobald Sie fügen Sie den code-block finden Sie unten im Beispiel code:

/*** Nothing out of the ordinary in your styles ***/
<style>
    div {
        height: 0;
        overflow: hidden;
        transition: height 1s;
    }
</style>

/*** Just add and remove one attribute and transition to/from auto! ***/

<div>
    I have tons of content and I am 0px in height you can't see me...
</div>

<div reveal>
     I have tons of content and I am 0px in height you can't see me...
     but now that you added the 'reveal' attribute, 
     I magically transitioned to full height!...
</div>

Hier ist der code-block in der Seite, nach, dass, es ist alles Soße:

Fallen diese JS-Datei in Ihre Seite - es Funktioniert Einfach™

/* Code height: auto; übergang */

(function(doc){

/* feature detection for browsers that report different values for scrollHeight when an element's overflow is hidden vs visible (Firefox, IE) */
var test = doc.documentElement.appendChild(doc.createElement('x-reveal-test'));
    test.innerHTML = '-';
    test.style.cssText = 'display: block !important; height: 0px !important; padding: 0px !important; font-size: 0px !important; border-width: 0px !important; line-height: 1px !important; overflow: hidden !important;';
var scroll = test.scrollHeight || 2;
doc.documentElement.removeChild(test);

var loading = true,
    numReg = /^([0-9]*\.?[0-9]*)(.*)/,
    skipFrame = function(fn){
      requestAnimationFrame(function(){
        requestAnimationFrame(fn);
      });
    },
    /* 2 out of 3 uses of this function are purely to work around Chrome's catastrophically busted implementation of auto value CSS transitioning */
    revealFrame = function(el, state, height){
        el.setAttribute('reveal-transition', 'frame');
        el.style.height = height;
        skipFrame(function(){
            el.setAttribute('reveal-transition', state);
            el.style.height = '';
        });
    },
    transitionend = function(e){
      var node = e.target;
      if (node.hasAttribute('reveal')) {
        if (node.getAttribute('reveal-transition') == 'running') revealFrame(node, 'complete', '');
      } 
      else {
        node.removeAttribute('reveal-transition');
        node.style.height = '';
      }
    },
    animationstart = function(e){
      var node = e.target,
          name = e.animationName;   
      if (name == 'reveal' || name == 'unreveal') {

        if (loading) return revealFrame(node, 'complete', 'auto');

        var style = getComputedStyle(node),
            offset = (Number(style.paddingTop.match(numReg)[1])) +
                     (Number(style.paddingBottom.match(numReg)[1])) +
                     (Number(style.borderTopWidth.match(numReg)[1])) +
                     (Number(style.borderBottomWidth.match(numReg)[1]));

        if (name == 'reveal'){
          node.setAttribute('reveal-transition', 'running');
          node.style.height = node.scrollHeight - (offset / scroll) + 'px';
        }
        else {
            if (node.getAttribute('reveal-transition') == 'running') node.style.height = '';
            else revealFrame(node, 'running', node.scrollHeight - offset + 'px');
        }
      }
    };

doc.addEventListener('animationstart', animationstart, false);
doc.addEventListener('MSAnimationStart', animationstart, false);
doc.addEventListener('webkitAnimationStart', animationstart, false);
doc.addEventListener('transitionend', transitionend, false);
doc.addEventListener('MSTransitionEnd', transitionend, false);
doc.addEventListener('webkitTransitionEnd', transitionend, false);

/*
    Batshit readyState/DOMContentLoaded code to dance around Webkit/Chrome animation auto-run weirdness on initial page load.
    If they fixed their code, you could just check for if(doc.readyState != 'complete') in animationstart's if(loading) check
*/
if (document.readyState == 'complete') {
    skipFrame(function(){
        loading = false;
    });
}
else document.addEventListener('DOMContentLoaded', function(e){
    skipFrame(function(){
        loading = false;
    });
}, false);

/* Styles that allow for 'reveal' attribute triggers */
var styles = doc.createElement('style'),
    t = 'transition: none; ',
    au = 'animation: reveal 0.001s; ',
    ar = 'animation: unreveal 0.001s; ',
    clip = ' { from { opacity: 0; } to { opacity: 1; } }',
    r = 'keyframes reveal' + clip,
    u = 'keyframes unreveal' + clip;

styles.textContent = '[reveal] { -ms-'+ au + '-webkit-'+ au +'-moz-'+ au + au +'}' +
    '[reveal-transition="frame"] { -ms-' + t + '-webkit-' + t + '-moz-' + t + t + 'height: auto; }' +
    '[reveal-transition="complete"] { height: auto; }' +
    '[reveal-transition]:not([reveal]) { -webkit-'+ ar +'-moz-'+ ar + ar +'}' +
    '@-ms-' + r + '@-webkit-' + r + '@-moz-' + r + r +
    '@-ms-' + u +'@-webkit-' + u + '@-moz-' + u + u;

doc.querySelector('head').appendChild(styles);

})(document);

/* Code für die DEMO */

    document.addEventListener('click', function(e){
      if (e.target.nodeName == 'BUTTON') {
        var next = e.target.nextElementSibling;
        next.hasAttribute('reveal') ? next.removeAttribute('reveal') : next.setAttribute('reveal', '');
      }
    }, false);

Weiter geht 's mit @jake' s Antwort, der übergang wird den ganzen Weg gehen, um die max Höhe erreicht, wodurch eine extrem schnelle animation - wenn Sie die übergänge für beide :hover-und ausschalten Sie können dann Steuern Sie die verrückte Geschwindigkeit ein wenig mehr.

Also die li:hover ist wenn die Maus betritt der Staat und dann der übergang auf den non-hovered-Eigenschaft wird mit der Maus verlassen.

Hoffentlich wird dies eine Hilfe sein.

e.g:

.sidemenu li ul {
   max-height: 0px;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   -ms-transition: all .3s ease;
   transition: all .3s ease;
}
.sidemenu li:hover ul {
    max-height: 500px;
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}
/* Adjust speeds to the possible height of the list */

Hier ist ein Turnschuh: http://jsfiddle.net/BukwJ/

War ich in der Lage, dies zu tun. Ich habe eine .child & ein .parent div. Das Kind div passt perfekt innerhalb des übergeordneten Elements Breite/Höhe mit absolute Positionierung. Ich animieren Sie dann die translate Eigenschaft zu schieben ist Y Wert nach unten 100%. Seine sehr glatte animation, keine Pannen oder unten Seiten wie jede andere Lösung.

Etwas wie dieses, pseudo-code

.parent{ position:relative; overflow:hidden; } 
/** shown state */
.child {
  position:absolute;top:0;:left:0;right:0;bottom:0;
  height: 100%;
  transition: transform @overlay-animation-duration ease-in-out;
  .translate(0, 0);
}

/** Animate to hidden by sliding down: */
.child.slidedown {
  .translate(0, 100%); /** Translate the element "out" the bottom of it's .scene container "mask" so its hidden */
}

Geben Sie ein height auf .parent im px, %, oder lassen Sie als auto. Dieses div dann Masken aus der .child div, wenn es nach unten gleitet.

Ich habe seit kurzem den übergang der max-height auf die li Elemente eher als die Verpackung ul.

Die Argumentation ist, dass die Verzögerung für kleine max-heights ist weit weniger Auffällig (wenn überhaupt) im Vergleich zu großen max-heights, und ich kann auch meine max-height Wert relativ zu der font-size des li anstatt eine beliebige große Anzahl von mit ems oder rems.

Wenn meine Schriftgröße ist 1rem, ich werde meine max-height etwas wie 3rem (um Platz für umbrochenen text). Sie können sehen, ein Beispiel hier:

http://codepen.io/mindfullsilence/pen/DtzjE

Dies ist nicht wirklich eine "Lösung" für das problem, sondern eher ein workaround. Es funktioniert nur, wie geschrieben, mit text, kann aber geändert werden, um andere Elemente benötigt, bin ich mir sicher.

.originalContent {
    font-size:0px;
    transition:font-size .2s ease-in-out;
}
.show { /* class to add to content */
    font-size:14px;
}

Hier ist ein Beispiel: http://codepen.io/overthemike/pen/wzjRKa

Im wesentlichen stellen Sie die font-size auf 0 und der übergang statt von der Höhe und max-Höhe, oder scaleY() etc. bei einer schnell genug Tempo, um die Höhe zu verwandeln, was Sie wollen. Für die Transformation der tatsächlichen Höhe mit CSS auf auto ist derzeit nicht möglich, aber die Umwandlung der Inhalte in ist, daher auch der font-size übergang.

• Hinweis - es IST javascript in der codepen, aber es ist einziger Zweck ist das hinzufügen/entfernen von css-Klassen auf klicken Sie auf für das Akkordeon. Diese kann getan werden, mit versteckten radio-buttons, aber ich war nicht auf das konzentriert, nur die Höhe transformation.

Des max-Höhe-Lösung von Jake funktioniert gut, wenn die hard-codiert
max-height-Wert geliefert wird, ist nicht viel größer als die Reale Höhe
(weil sonst gibt es unerwünschten Verzögerungen und timing-Probleme).
Auf der anderen Seite, wenn die hart-kodierten Wert versehentlich geändert wird
nicht größer als die wirkliche Höhe des Elements nicht öffnen vollständig.

Den folgenden CSS-Lösung erfordert auch eine hart-codierte Größe
sollte größer sein, als die meisten der auftretenden realen Größen. Doch diese
die Lösung funktioniert auch, wenn die echte Größe ist in manchen Situationen größer als
die hart-codierte Größe. In diesem Fall ist die Umstellung vielleicht ein bisschen springen,
aber es wird nie verlassen ein teilweise sichtbares element.
Also diese Lösung kann auch verwendet werden, für unbekannte Inhalte, z.B. von
eine Datenbank, wo Sie wissen, dass nur der Inhalt ist in der Regel nicht größer
als x Pixel, aber es gibt Ausnahmen.

Idee ist, verwenden Sie einen negativen Wert für margin-bottom (oder Marge-top für eine
leicht diffenrent animation) und das content-element in eine
mittlere element mit overflow:hidden. Die negative Marge aus dem Inhalt
element, so reduziert sich die Höhe des mittleren Elements.

Der folgende code verwendet ein übergang auf den margin-bottom von 150px zu
0px. Allein dies funktioniert gut, solange der content-element nicht
höher als 150px. Zusätzlich verwendet es eine Umstellung auf max-Höhe für die
mittlere element von 0px auf 100%. Diese schließlich blendet das mittlere element
wenn das content-element ist höher als 150px.
Für die max-Höhe, der übergang ist nur zu verzögern Ihre Anwendung
von einem zweiten, beim schließen, nicht für eine glatte visiual-Effekt (
und deshalb kann es laufen von 0px bis 100%).

CSS:

.content {
  transition: margin-bottom 1s ease-in;
  margin-bottom: -150px;
}
.outer:hover .middle .content {
  transition: margin-bottom 1s ease-out;
  margin-bottom: 0px
}
.middle {
  overflow: hidden;
  transition: max-height .1s ease 1s;
  max-height: 0px
}
.outer:hover .middle {
  transition: max-height .1s ease 0s;
  max-height: 100%
}

HTML:

<div class="outer">
  <div class="middle">
    <div class="content">
      Sample Text
      <br> Sample Text
      <br> Sample Text
      <div style="height:150px">Sample Test of height 150px</div>
      Sample Text
    </div>
  </div>
  Hover Here
</div>

Den Wert für margin-bottom sollte negativ sein und so nah wie
möglichen zum wirklichen Höhe des content-element. Wenn's absoute
Wert) größer ist, gibt es ähnliche Verzögerung und timing-Probleme, wie mit
die max-Höhe-Lösungen, die aber beschränkt werden kann, solange die
hart codierte Größe ist nicht viel größer als die Reale. Wenn der absolute
Wert für margin-bottom kleiner ist als die Reale Höhe der
tansition springt ein bisschen. In jedem Fall nach dem übergang der
content-element entweder vollständig sichtbar oder vollständig entfernt.

Für mehr details siehe mein blog-post http://www.taccgl.org/blog/css_transition_display.html#combined_height

Legen Sie die height auf auto und den übergang des max-Höhe.

Getestet auf Chrome v17

div {
  position: absolute;
  width:100%;
  bottom:0px;
  left:0px;

  background:#333;
  color: #FFF;

  max-height:100%; /**/
  height:auto; /**/

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.close {
  max-height:0%; /**/
}

Habe ich diese Arbeit durch das max-Höhe keine, immer die Höhe, re-legen Sie die maximale Höhe der berechneten Höhe. Funktioniert prefectly für mich. Ich habe diese Arbeit für ein Akkordeon-Menü, mit <h5>'s als die toggler ausbau der <div> innerhalb der <div>.

JS:

$('h5').click(function(e) {
  $(this).parent('div').addClass('temp_expanded');
  var getheight = ($(this).parent('div').find('div').height());
  $(this).parent('div').removeClass('temp_expanded');
  $(this).parent('div').find('div').css('max-height', getheight);
});

WENIGER:

div {
> div {
    max-height: 0px;
    overflow: hidden;
    .transition(all 0.3s ease-in-out);
}

&.temp_expanded {
    > div {
        max-height: none;
    }
}

Für eine Reine CSS-Lösung, die animiert max-height, der nicht über eine massive Verspätung würde ich erwägen eine vernünftige max-height auf schweben, irgendwo um 500 Pixel oder rund um oder geringfügig größer als die Höhe der die meisten Elemente, die Sie animieren möchten, und haben größere Inhalte scrollen Sie durch die Einstellung overflow-y zu auto nachdem die animation ist komplett mit einem 0,5 s Verzögerung.

Dann festlegen, dass Ihr übergang, um Sie etwas rund um 0,3 s (oder etwas langsamer, wenn die Erweiterung am Ende verschieben andere Inhalte, um Sie auf Ihre Seite) mit einem exponentiellen Leichtigkeit-out-cubic-bezier-Kurve zu öffnen, und eine Leichtigkeit-in cubic-bezier-Kurve und etwas schneller auf schließen, etwa 0,15 s, wenn die Leute entlassen, etwas von der Seite, Sie in der Regel nicht wirklich wollen, warten, um zu sehen Sie gehen Weg.

Diese schnelle Animationen werden immer noch sichtbar für den Benutzer, und minimieren die Wirkung von max-height Verzögerung verursacht Ihrer Seite fühlen sich träge.

Würde der code wie folgt Aussehen:

#child0 {
  max-height: 0;
  overflow-y: hidden;
  background-color: #dedede;
  -webkit-transition: max-height 0.15s cubic-bezier(0.7, 0, 1, 0.5), overflow-y 0s linear 0s;
  -moz-transition: max-height 0.15s cubic-bezier(0.7, 0, 1, 0.5), overflow-y 0s linear 0s;
  -o-transition: max-height 0.15s cubic-bezier(0.7, 0, 1, 0.5), overflow-y 0s linear 0s;
  transition: max-height 0.15s cubic-bezier(0.7, 0, 1, 0.5), overflow-y 0s linear 0s;
}
#parent0:hover #child0 {
  max-height: 500px;
  overflow-y: auto;
  -webkit-transition: max-height 0.3s cubic-bezier(0.1, 0.9, 0.2, 1), overflow-y 0s linear 0.3s;
  -moz-transition: max-height 0.3s cubic-bezier(0.1, 0.9, 0.2, 1), overflow-y 0s linear 0.3s;
  -o-transition: max-height 0.3s cubic-bezier(0.1, 0.9, 0.2, 1), overflow-y 0s linear 0.3s;
  transition: max-height 0.3s cubic-bezier(0.1, 0.9, 0.2, 1), overflow-y 0s linear 0.3s;
}

Ich habe dieses problem und mein workaround gefunden.

Erstens habe ich versucht zu verwenden max-height. Aber es gibt zwei Probleme:

1. Ich bin mir nicht wirklich sicher, was ist der max-height, da ich den ausbau eine unbekannte Länge-text-block.
2. Wenn ich max-height zu groß ist, gibt es eine große Verzögerung, wenn es kollabiert.

Dann, mein workaround:

function toggleBlock(e) {
    var target = goog.dom.getNextElementSibling(e.target);
    if (target.style.height && target.style.height != "0px") { //collapsing
        goog.style.setHeight(target, target.clientHeight);
        setTimeout(function(){
            target.style.height = "0px";
        }, 100);
    } else { //expanding
        target.style.height = "auto";
        //get the actual height
        var height = target.clientHeight;
        target.style.height = "0px";
        setTimeout(function(){
            goog.style.setHeight(target, height);
        }, 100);
        setTimeout(function(){
            //Set this because I have expanding blocks inside expanding blocks
            target.style.height="auto";
        }, 600); //time is set 100 + transition-duration
    }
}

Den scss:

div.block {
    height: 0px;
    overflow: hidden;
    @include transition-property(height);
    @include transition-duration(0.5s);
}