Hoe kan ik de hoogte overzetten: 0; naar hoogte: automatisch; CSS gebruiken?

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

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

Antwoord 19

Hier is een manier om over te stappen van elke starthoogte, inclusief 0, naar automatisch (volledige grootte en flexibel) zonder dat er per knooppunt een vaste code nodig is of een gebruikerscode om te initialiseren: https://github.com/csuwildcat/transition-auto. Dit is eigenlijk de heilige graal voor wat je wilt, geloof ik –> http://codepen.io/csuwldcat/pen/kwsdF. Sla gewoon het volgende JS-bestand op je pagina en het enige wat je daarna hoeft te doen is een enkel booleaans attribuut – reveal=""– toevoegen/verwijderen van de knooppunten die je wilt uitvouwen en inkrimpen.

Dit is alles wat u als gebruiker hoeft te doen, zodra u het codeblok onder de voorbeeldcode heeft opgenomen:

/*** 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 is het codeblok dat je in je pagina moet opnemen, daarna is het allemaal jus:

Zet dit JS-bestand op uw pagina – het werkt allemaal gewoon™

/* Code voor hoogte: auto; overgang */

(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 voor 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);

Antwoord 20

Ik denk dat ik een heel solide oplossing heb bedacht

Oké! Ik weet dat dit probleem zo oud is als het internet, maar ik denk dat ik een oplossing heb die ik heb omgezet in een plug-in genaamd mutant -overgang. Mijn oplossing stelt de style=""-attributen in voor bijgehouden elementen wanneer er een wijziging is in de DOM. het eindresultaat is dat je goede oude CSS kunt gebruiken voor je overgangen en geen hacky-fixes of speciaal javascript kunt gebruiken. Het enige dat u hoeft te doen is instellen wat u wilt bijhouden op het betreffende element met behulp van data-mutant-attributes="X".

<div data-mutant-attributes="height">                                                                      
        This is an example with mutant-transition                                                                                                          
    </div>

Dat is het! Deze oplossing gebruikt MutationObserverom wijzigingen in de DOM te volgen. Hierdoor hoef je niet echt iets in te stellen of javascript te gebruiken om dingen handmatig te animeren. Wijzigingen worden automatisch bijgehouden. Omdat het echter MutationObserver gebruikt, zal dit alleen overgaan in IE11+.

Viooltjes!

• Overgang demonstreren van height: autonaar height: 100%
• Demonstreren van overgang height: autobij het toevoegen van kinderen

21

Ik realiseer me dat deze draad oud wordt, maar het staat hoog op bepaalde Google-zoekopdrachten, dus ik denk dat het de moeite waard is om bij te werken.

U krijgt ook gewoon de eigen lengte van het element:

var load_height = document.getElementById('target_box').clientHeight;
document.getElementById('target_box').style.height = load_height + 'px';

U moet dit JavaScript onmiddellijk na de sluitingstag van Target_box in een Inline Script-tag dumpen.

22

Ik heb onlangs de max-heightovergeslagen op de liELEMENTEN in plaats van de inpakken ul.

De redenering is dat de vertraging voor kleine max-heightsveel minder merkbaar is (indien helemaal) in vergelijking met grote max-heights, en ik kan ook mijn max-heightWaarde ten opzichte van de font-sizevan de liin plaats van een willekeurig enorm getal met behulp van emsof rems.

Als mijn lettergrootte 1remis, zal ik mijn max-heightinstellen op zoiets als 3rem(om ingepakte tekst te huisvesten). U kunt hier een voorbeeld zien:

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

23

Ik heb een antwoord gepost met wat JavaScript en ben gedownded, dus raakte geïrriteerd en opnieuw geprobeerd en heeft het alleen met CSS gekraakt!

Deze oplossing gebruikt een paar ‘technieken’:

• padding-bottom:100%‘hack’ waarbij percentages worden gedefinieerd in termen van de huidige breedte van het element. Meer informatie over deze techniek.
• zwevende krimp-verpakking, (een extra div nodig om de vlotter clearing hack toe te passen)
• Ongedemantelijk gebruik van https://caniuse.com/#Feat=CSS-writing-mode en enkele transformaties om het ongedaan te maken (hiermee kan het gebruik van de vulling hack boven in een verticale context)

De upshot is echter dat we uitvoerend overgang krijgen met behulp van CSS alleen en een enkele overgangsfunctie om de overgang soepel te bereiken; De Heilige Graal!

Natuurlijk is er een nadeel! Ik kan niet werken hoe u de breedte kunt besturen waarmee inhoud wordt afgesneden (overflow:hidden); Vanwege de hack van de vatding-bodem zijn de breedte en hoogte nauw verwant. Er kan echter een manier zijn, dus zal eraan terugkomen.

https://jsfiddle.net/Eoghanm/n1RP3ZB4/28/

body {
  padding: 1em;
}
.trigger {
  font-weight: bold;
}
/* .expander is there for float clearing purposes only */
.expander::after {
  content: '';
  display: table;
  clear: both;
}
.outer {
  float: left; /* purpose: shrink to fit content */
  border: 1px solid green;
  overflow: hidden;
}
.inner {
  transition: padding-bottom 0.3s ease-in-out;  /* or whatever crazy transition function you can come up with! */
  padding-bottom: 0%;  /* percentage padding is defined in terms of width. The width at this level is equal to the height of the content */
  height: 0;
  /* unfortunately, change of writing mode has other bad effects like orientation of cursor */
  writing-mode: vertical-rl;
  cursor: default; /* don't want the vertical-text (sideways I-beam) */
  transform: rotate(-90deg) translateX(-100%);  /* undo writing mode */
  transform-origin: 0 0;
  margin: 0;  /* left/right margins here will add to height */
}
.inner > div { white-space: nowrap; }
.expander:hover .inner,  /* to keep open when expanded */
.trigger:hover+.expander .inner {
  padding-bottom: 100%;
}

<div class="trigger">HoverMe</div>
<div class="expander">
  <div class="outer">
    <div class="inner">
      <div>First Item</div>
      <div>Content</div>
      <div>Content</div>
      <div>Content</div>
      <div>Long Content can't be wider than outer height unfortunately</div>
      <div>Last Item</div>
    </div>
  </div>
</div>
<div>
  after content</div>
</div>

#child0 {
    display: none;
}
#parent0:hover #child0 {
    display: block;
    animation: height-animation;
    animation-duration: 200ms;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    animation-delay: 200ms;
}
@keyframes height-animation {
    0% {
        clip-path: polygon(0% 0%, 100% 0.00%, 100% 0%, 0% 0%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0.00%, 100% 100%, 0% 100%);
    }
}

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

.parent{ border-top: #999 1px solid;}
h1{ margin: .5rem; font-size: 1.3rem}
.children {
  height: 0;
  overflow: hidden;
  background-color: #dedede;
  transition: padding .2s ease-in-out, opacity .2s ease-in-out;
  padding: 0 .5rem;
  opacity: 0;
}
.children::before, .children::after{ content: "";display: block;}
.children::before{ margin-top: -2rem;}
.children::after{ margin-bottom: -2rem;}
.parent:hover .children {
  height: auto;
  opacity: 1;
  padding: 2.5rem .5rem;/* 0.5 + abs(-2), make sure it's less than expected min-height */
}

<div class="parent">
  <h1>Hover me</h1>
  <div class="children">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>
<div class="parent">
  <h1>Hover me(long content)</h1>
  <div class="children">Some content
    <br>Some content<br>Some content
    <br>Some content<br>Some content
    <br>Some content<br>Some content
    <br>Some content<br>Some content
    <br>Some content<br>Some content
    <br>
  </div>
</div>
<div class="parent">
  <h1>Hover me(short content)</h1>
  <div class="children">Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>

<nav id="main-nav">
    <ul>
        <li>
            <a class="main-link" href="yourlink.html">Link</a>
            <ul>
                <li><a href="yourlink.html">Sub Link</a></li>
            </ul>
        </li>
    </ul>
</nav>

   $('#main-nav li ul').each(function(){
        $me = $(this);
        //Count the number of li elements in this UL
        var liCount = $me.find('li').size(),
        //Multiply the liCount by the height + the margin on each li
            ulHeight = liCount * 28;
        //Store height in the data-height attribute in the UL
        $me.attr("data-height", ulHeight);
    });

$('#main-nav li a.main-link').click(function(){
    //Collapse all submenus back to 0
    $('#main-nav li ul').removeAttr('style');
    $(this).parent().addClass('current');
    //Set height on current submenu to it's height
    var $currentUl = $('li.current ul'),
        currentUlHeight = $currentUl.attr('data-height');
})

#main-nav li ul { 
    height: 0;
    position: relative;
    overflow: hidden;
    opacity: 0; 
    filter: alpha(opacity=0); 
    -ms-filter: "alpha(opacity=0)";
    -khtml-opacity: 0; 
    -moz-opacity: 0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
#main-nav li.current ul {
    opacity: 1.0; 
    filter: alpha(opacity=100); 
    -ms-filter: "alpha(opacity=100)";
    -khtml-opacity: 1.0; 
    -moz-opacity: 1.0;
}
.ie #main-nav li.current ul { height: auto !important }
#main-nav li { height: 25px; display: block; margin-bottom: 3px }

const showHideElement = (element, open) => {
  element.style.height = element.scrollHeight + 'px';
  element.classList.toggle('open', open);
  if (open) {
    element.addEventListener('transitionend', () => {
      element.style.removeProperty('height');
    }, {
      once: true
    });
  } else {
    window.setTimeout(() => {
      element.style.removeProperty('height');
    });
  }
}
const menu = document.body.querySelector('#menu');
const list = document.body.querySelector('#menu > ul')
menu.addEventListener('mouseenter', () => showHideElement(list, true));
menu.addEventListener('mouseleave', () => showHideElement(list, false));

#menu > ul {
  height: 0;
  overflow: hidden;
  background-color: #999;
  transition: height .25s ease-out;
}
#menu > ul.open {
  height: auto;
}

<div id="menu">
  <a>hover me</a>
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>

div.class{
   min-height:1%;
   max-height:200px;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
   overflow:hidden;
}
div.class:hover{
   min-height:100%;
   max-height:3000px;
}