Vraag Hoe kan ik een overgangshoogte maken: 0; naar hoogte: auto; CSS gebruiken?


Ik probeer een te maken <ul> schuif naar beneden met behulp van CSS-overgangen.

De <ul> begint om height: 0;. Bij zweven is de hoogte ingesteld op height:auto;. Dit zorgt er echter gewoon voor dat het verschijnt, niet overgang,

Als ik het doe height: 40px; naar height: auto;, dan zal het omhoog schuiven naar height: 0;en spring dan opeens naar de juiste hoogte.

Hoe kan ik dit anders doen zonder JavaScript te gebruiken?

#child0 {
  height: 0;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent0:hover #child0 {
  height: auto;
}
#child40 {
  height: 40px;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent40:hover #child40 {
  height: auto;
}
h1 {
  font-weight: bold;
}
The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
<hr>
<div id="parent0">
  <h1>Hover me (height: 0)</h1>
  <div id="child0">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>
<hr>
<div id="parent40">
  <h1>Hover me (height: 40)</h1>
  <div id="child40">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>


1594
2017-08-18 02:50


oorsprong


antwoorden:


Gebruik max-height in de transformatie en niet height. En stel een waarde in max-height tot iets dat groter is dan je doos ooit zal krijgen.

Zien JSFiddle-demo geleverd door Chris Jordan in een andere antwoord hier.

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


2157
2017-11-30 18:42



U moet in plaats daarvan scaleY gebruiken.

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

Ik heb van een verkoper een voorgemengde versie van de bovenstaande code gemaakt op jsfiddle, http://jsfiddle.net/dotnetCarpenter/PhyQc/9/ en veranderde je jsfiddle om scaleY in plaats van height te gebruiken, http://jsfiddle.net/dotnetCarpenter/7cnfc/206/.


228
2018-06-23 10:57



Je kunt op dit moment niet op hoogte animeren wanneer een van de hoogtes is betrokken auto, je moet twee expliciete hoogtes instellen.


164
2017-08-18 12:46



De oplossing die ik altijd heb gebruikt, was om eerst uit te faden en daarna de font-size, padding en margin waarden. Het ziet er niet hetzelfde uit als een veeg, maar werkt zonder statisch height of max-height.

/* final display */
.menu .list {
    margin: .5em 1em;
    padding: 1em;
}

/* hide */
.menu:not(:hover) .list {
    font-size: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    /* fade out, then shrink */
    transition: opacity .25s,
                font-size .5s .25s,
                margin .5s .25s,
                padding .5s .25s;
}

/* reveal */
.menu:hover .list {
    /* unshrink, then fade in */
    transition: font-size .25s,
                margin .25s,
                padding .25s,
                opacity .5s .25s;
}

Werk voorbeeld:

/* final display */
#menu #list {
    margin: .5em 1em;
    padding: 1em;
}

/* hide */
#menu:not(:hover) #list {
    font-size: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    /* fade out, then shrink */
    transition: opacity .25s,
                font-size .5s .25s,
                margin .5s .25s,
                padding .5s .25s;
}

/* reveal */
#menu:hover #list {
    /* unshrink, then fade in */
    transition: font-size .25s,
                margin .25s,
                padding .25s,
                opacity .5s .25s;
}
<div id="menu">
    <b>hover me</b>
    <ul id="list">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

Spacing.


81
2018-05-29 14:05



Dat kan met een klein beetje niet-semantische jiggery-pokerij. Mijn gebruikelijke benadering is het animeren van de hoogte van een buitenste DIV die een enkel kind heeft dat een stijlloze DIV is die alleen wordt gebruikt voor het meten van de inhoudshoogte.

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    var wrapper = document.querySelector('.measuringWrapper');
    growDiv.style.height = wrapper.clientHeight + "px";
  }
}
#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}
<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div class='measuringWrapper'>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
  </div>
</div>

Men zou gewoon willen afzien van de .measuringWrapper en stel gewoon de hoogte van de DIV in op automatisch en laat die animeren, maar dat lijkt niet te werken (de hoogte wordt ingesteld, maar er treedt geen animatie op).

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    growDiv.style.height = 'auto';
  }
}
#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}
<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
</div>

Mijn interpretatie is dat een expliciete hoogte nodig is om de animatie uit te voeren. U kunt geen animatie op hoogte krijgen wanneer een van beide hoogte (de start- of eindhoogte) is auto.


64
2018-06-30 13:32



Ik weet dat dit het een en dertigste antwoord op deze vraag is, maar ik denk dat het het waard is, dus hier gaat het. Dit is een CSS-only oplossing met de volgende eigenschappen:

  • Er is geen vertraging aan het begin en de overgang stopt niet vroeg. In beide richtingen (uitbreiden en samenvouwen), als u een overgangsduur van 300ms opgeeft in uw CSS, duurt de overgang 300ms, punt.
  • Het is de overgang van de werkelijke hoogte (in tegenstelling tot transform: scaleY(0)), dus het doet het goede als er inhoud is achter het samenvouwbare element.
  • Terwijl (zoals in andere oplossingen) daar zijn magische getallen (zoals "kies een lengte die hoger is dan je doos ooit zal zijn"), het is niet dodelijk als je aanname verkeerd eindigt. De overgang ziet er in dat geval misschien niet geweldig uit, maar voor en na de overgang is dit geen probleem: in de uitgebreide (height: auto) staat, heeft de hele inhoud altijd de juiste hoogte (in tegenstelling tot bijvoorbeeld als u een max-heightdat blijkt te laag). En in de samengevouwen toestand is de hoogte gelijk aan nul.

demonstratie

Hier is een demo met drie inklapbare elementen, allemaal in verschillende hoogtes, die allemaal dezelfde CSS gebruiken. U kunt op "volledige pagina" klikken nadat u op "fragment uitvoeren" hebt geklikt. Let op: JavaScript schakelt alleen de collapsed CSS-klasse, er is geen meting mee gemoeid. (Je zou deze exacte demo zonder JavaScript kunnen doen door een selectievakje of te gebruiken :target). Merk ook op dat het deel van de CSS dat verantwoordelijk is voor de overgang vrij kort is en dat de HTML slechts één extra wrapperelement vereist.

$(function () {
  $(".toggler").click(function () {
    $(this).next().toggleClass("collapsed");
    $(this).toggleClass("toggled"); // this just rotates the expander arrow
  });
});
.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;
}
<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>

Hoe werkt het?

Er zijn in feite twee overgangen die betrokken zijn bij het realiseren hiervan. Een van de overgangen van de margin-bottom van 0px (in de uitgevouwen status) tot -2000px in de samengevouwen toestand (vergelijkbaar met dit antwoord). De 2000 hier is het eerste magische getal, het is gebaseerd op de aanname dat je doos niet hoger zal zijn (2000 pixels lijkt een redelijke keuze).

De ... gebruiken margin-bottom overgang alleen op zichzelf heeft twee problemen:

  • Als u daadwerkelijk een doos heeft die hoger is dan 2000 pixels, dan is margin-bottom: -2000px zal niet alles verbergen - er zullen zichtbare dingen zijn, zelfs in de ingeklapte zaak. Dit is een kleine oplossing die we later zullen doen.
  • Als het werkelijke vakje bijvoorbeeld 1000 pixels hoog is en je overgang 300ms lang is, dan is de zichtbaar de overgang is al na ongeveer 150 ms (of, in de tegenovergestelde richting, begint 150ms te laat).

Het oplossen van dit tweede probleem is waar de tweede overgang binnenkomt, en deze overgang richt zich op de wrapper's minimum hoogte ("conceptueel", omdat we het niet daadwerkelijk gebruiken min-height eigendom voor dit; daarover later meer).

Hier is een animatie die laat zien hoe het combineren van de overgang van de ondermarge met de minimale hoogtetransitie, beide van gelijke duur, ons een gecombineerde overgang geeft van volledige hoogte naar nulhoogte met dezelfde duur.

animation as described above

De linker balk laat zien hoe de negatieve ondermarge de onderkant naar boven duwt, waardoor de zichtbare hoogte afneemt. De middelste balk geeft aan hoe de minimumhoogte ervoor zorgt dat in het geval van samenvouwen de overgang niet vroegtijdig wordt beëindigd, en in het uitbreidende geval begint de overgang niet laat. De rechter balk laat zien hoe de combinatie van de twee ervoor zorgt dat het vak in de juiste hoeveelheid tijd overgaat van volledige hoogte naar nulhoogte.

Voor mijn demo heb ik genoegen genomen met 50px als de bovenste minimumhoogtewaarde. Dit is het tweede magische getal, en het moet lager zijn dan de lengte van het vak ooit zou zijn. 50px lijkt ook redelijk; het lijkt onwaarschijnlijk dat je heel vaak een opvouwbaar element wilt maken dat in de eerste plaats niet eens 50 pixels hoog is.

Zoals je kunt zien in de animatie, is de resulterende overgang continu, maar deze is niet te differentiëren - op het moment dat de minimale hoogte gelijk is aan de volledige hoogte aangepast door de ondermarge, is er een plotselinge verandering in snelheid. Dit is erg merkbaar in de animatie omdat het een lineaire timingfunctie gebruikt voor beide overgangen en omdat de hele overgang erg traag is. In het echte geval (mijn demo bovenaan), duurt de overgang slechts 300ms en is de overgang naar de ondermarge niet lineair. Ik heb met veel verschillende timingfuncties gespeeld voor beide overgangen en degenen met wie ik eindigde, voelden aan alsof ze het best voor de meest uiteenlopende gevallen werkten.

Er zijn nog twee problemen die opgelost moeten worden:

  1. het punt van boven, waar vakken met een hoogte van meer dan 2000 pixels niet volledig zijn verborgen in de samengevouwen toestand,
  2. en het omgekeerde probleem, waarbij in het niet-verborgen geval vakken met een hoogte van minder dan 50 pixels te hoog zijn, zelfs wanneer de overgang niet loopt, omdat de minimale hoogte ze op 50 pixels houdt.

We lossen het eerste probleem op door het containerelement a te geven max-height: 0 in het samengevouwen geval, met een 0s 0.3s overgang. Dit betekent dat het niet echt een overgang is, maar het max-height wordt toegepast met een vertraging; het is alleen van toepassing als de overgang voorbij is. Om dit correct te laten werken, moeten we ook een cijfer kiezen max-height voor het tegenovergestelde, niet-ingeklapte toestand. Maar in tegenstelling tot het 2000px-geval, waarbij het kiezen van een te groot aantal van invloed is op de kwaliteit van de overgang, maakt het in dit geval echt niet uit. We kunnen dus een getal kiezen dat zo hoog is dat wij weten dat er nooit een hoogte dichtbij zal komen. Ik heb een miljoen pixels uitgekozen. Als je denkt dat je inhoud van meer dan een miljoen pixels moet ondersteunen, dan is het 1) Sorry, en 2) voeg gewoon een paar nullen toe.

Het tweede probleem is de reden waarom we het niet echt gebruiken min-height voor de minimale hoogtetransitie. In plaats daarvan is er een ::after pseudo-element in de container met een height dat overgangen van 50px naar nul. Dit heeft hetzelfde effect als een min-height: Het zal de container niet laten krimpen tot onder de hoogte die het pseudo-element momenteel heeft. Maar omdat we gebruiken height, niet min-height, we kunnen nu gebruiken max-height (opnieuw toegepast met een vertraging) om de werkelijke hoogte van het pseudo-element in te stellen op nul zodra de overgang voorbij is, zodat ten minste buiten de overgang, zelfs kleine elementen de juiste hoogte hebben. Omdat min-height is sterker dan max-height, dit zou niet werken als we de containers gebruiken min-height in plaats van de pseudo-elementen height. Net als de max-height in de vorige paragraaf, dit max-height heeft ook een waarde nodig voor het tegenovergestelde einde van de overgang. Maar in dit geval kunnen we gewoon de 50px kiezen.

Getest in Chrome (Win, Mac, Android, iOS), Firefox (Win, Mac, Android), Edge, IE11 (behalve een probleem met de lay-out van een flexbox met mijn demo dat ik fout vond in het debuggen) en Safari (Mac, iOS ). Over flexbox gesproken, het zou mogelijk moeten zijn om dit te laten werken zonder gebruik te maken van een flexbox; in feite denk ik dat je bijna alles kunt laten werken in IE7 - behalve dat je geen CSS-overgangen hebt, waardoor het een nogal zinloze oefening wordt.


45
2018-05-14 14:33



Een visuele oplossing voor het animeren van hoogte met CSS3-overgangen is om de opvulling in plaats daarvan te animeren.

Je krijgt niet het volledige veegeffect, maar als je speelt met de overgangsduur en opvullingswaarden, kom je dicht genoeg bij elkaar. Als u de hoogte / max-hoogte niet expliciet wilt instellen, moet dit zijn wat u zoekt.

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's above jsFiddle)


44
2018-06-26 19:05



Mijn oplossing is om de maximale hoogte over te zetten naar de exacte hoogte van het materiaal voor een mooie vloeiende animatie. Gebruik vervolgens een transitionEnd-callback om de max-height in te stellen op 9999 px, zodat de inhoud vrij kan worden aangepast.

var content = $('#content');
content.inner = $('#content .inner'); // inner div needed to get size of content when closed

// css transition callback
content.on('transitionEnd webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd', function(e){
    if(content.hasClass('open')){
        content.css('max-height', 9999); // try setting this to 'none'... I dare you!
    }
});

$('#toggle').on('click', function(e){
    content.toggleClass('open closed');
    content.contentHeight = content.outerHeight();
    
    if(content.hasClass('closed')){
        
        // disable transitions & set max-height to content height
        content.removeClass('transitions').css('max-height', content.contentHeight);
        setTimeout(function(){
            
            // enable & start transition
            content.addClass('transitions').css({
                'max-height': 0,
                'opacity': 0
            });
            
        }, 10); // 10ms timeout is the secret ingredient for disabling/enabling transitions
        // chrome only needs 1ms but FF needs ~10ms or it chokes on the first animation for some reason
        
    }else if(content.hasClass('open')){  
        
        content.contentHeight += content.inner.outerHeight(); // if closed, add inner height to content height
        content.css({
            'max-height': content.contentHeight,
            'opacity': 1
        });
        
    }
});
.transitions {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
}

body {
    font-family:Arial;
    line-height: 3ex;
}
code {
    display: inline-block;
    background: #fafafa;
    padding: 0 1ex;
}
#toggle {
    display:block;
    padding:10px;
    margin:10px auto;
    text-align:center;
    width:30ex;
}
#content {
    overflow:hidden;
    margin:10px;
    border:1px solid #666;
    background:#efefef;
    opacity:1;
}
#content .inner {
    padding:10px;
    overflow:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="content" class="open">
    <div class="inner">
        <h3>Smooth CSS Transitions Between <code>height: 0</code> and <code>height: auto</code></h3>
        <p>A clever workaround is to use <code>max-height</code> instead of <code>height</code>, and set it to something bigger than your content. Problem is the browser uses this value to calculate transition duration. So if you set it to <code>max-height: 1000px</code> but the content is only 100px high, the animation will be 10x too fast.</p>
        <p>Another option is to measure the content height with JS and transition to that fixed value, but then you have to keep track of the content and manually resize it if it changes.</p>
        <p>This solution is a hybrid of the two - transition to the measured content height, then set it to <code>max-height: 9999px</code> after the transition for fluid content sizing.</p>
    </div>
</div>

<br />

<button id="toggle">Challenge Accepted!</button>


43
2018-03-19 00:44



Het geaccepteerde antwoord werkt in de meeste gevallen, maar het werkt niet goed wanneer je div kan enorm variëren in hoogte - de animatiesnelheid is niet afhankelijk van de werkelijke hoogte van de inhoud en kan er schokkerig uitzien.

Je kunt nog steeds de eigenlijke animatie uitvoeren met CSS, maar je moet JavaScript gebruiken om de hoogte van de items te berekenen, in plaats van te proberen te gebruiken auto. Geen jQuery is vereist, hoewel je dit misschien een beetje moet wijzigen als je compatibiliteit wilt (werkt in de nieuwste versie van Chrome :)).

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';
    }
}
#menu #list {
    height: 0px;
    transition: height 0.3s ease;
    background: #d5d5d5;
    overflow: hidden;
}
<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>


31
2017-10-20 22:57



Gebruik max-height met verschillende overgangsversmalling en vertraging voor elke staat.

HTML:

<a href="#" id="trigger">Hover</a>
<ul id="toggled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
<ul>

CSS:

#toggled{
    max-height: 0px;
    transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}

#trigger:hover + #toggled{
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
    transition-delay: 0s;
}

Zie voorbeeld: http://jsfiddle.net/0hnjehjc/1/


23
2017-12-16 23:35