Question Comment puis-je transition hauteur: 0; à la hauteur: auto; en utilisant CSS?


J'essaie de faire un <ul> glisser vers le bas en utilisant les transitions CSS.

le <ul> commence à height: 0;. En vol stationnaire, la hauteur est définie sur height:auto;. Cependant, cela le fait apparaître simplement, ne pas transition,

Si je le fais de height: 40px; à height: auto;, alors il va glisser jusqu'à height: 0;, puis sautez soudainement à la bonne hauteur.

Sinon, comment pourrais-je faire cela sans JavaScript?

#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


origine


Réponses:


Utilisation max-height dans la transformation et non height. Et définir une valeur sur max-height à quelque chose de plus grand que votre boîte ne le sera jamais.

Voir JSFiddle démo fourni par Chris Jordan dans un autre répondre ici.

#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



Vous devriez utiliser scaleY à la place.

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

J'ai fait une version préfixée par le vendeur du code ci-dessus sur jsfiddle, http://jsfiddle.net/dotnetCarpenter/PhyQc/9/ et changé votre jsfiddle pour utiliser scaleY au lieu de height, http://jsfiddle.net/dotnetCarpenter/7cnfc/206/.


228
2018-06-23 10:57



Vous ne pouvez pas animer actuellement en hauteur lorsque l'une des hauteurs concernées est auto, vous devez définir deux hauteurs explicites.


164
2017-08-18 12:46



La solution que j'ai toujours utilisée était d'abord de disparaître, puis de réduire font-size, padding et margin valeurs. Il ne ressemble pas à une lingette, mais il fonctionne sans statique height ou 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;
}

Exemple de travail:

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



Vous pouvez, avec un peu de jiggery-pokery non sémantique. Mon approche habituelle consiste à animer la hauteur d'un DIV externe qui a un seul enfant qui est un DIV sans style utilisé uniquement pour mesurer la hauteur du contenu.

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>

On aimerait juste pouvoir se passer du .measuringWrapper et il suffit de définir la hauteur de la DIV en auto et de l'animer, mais cela ne semble pas fonctionner (la hauteur est définie, mais aucune animation ne se produit).

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>

Mon interprétation est qu'une hauteur explicite est nécessaire pour que l'animation s'exécute. Vous ne pouvez pas obtenir une animation sur la hauteur lorsque la hauteur (la hauteur de début ou de fin) est auto.


64
2018-06-30 13:32



Je sais que c'est la trentième réponse à cette question, mais je pense que ça en vaut la peine, alors voilà. C'est un CSS seulement solution avec les propriétés suivantes:

  • Il n'y a pas de retard au début, et la transition ne s'arrête pas tôt. Dans les deux directions (expansion et effondrement), si vous spécifiez une durée de transition de 300 ms dans votre CSS, la transition prend 300 ms, point.
  • Il fait la transition à la hauteur réelle (contrairement à transform: scaleY(0)), donc il fait la bonne chose s'il y a du contenu après l'élément réductible.
  • Alors que (comme dans d'autres solutions) il sont les nombres magiques (comme "choisir une longueur qui est plus élevée que votre boîte ne le sera jamais"), ce n'est pas fatal si votre hypothèse finit par être fausse. La transition peut ne pas sembler étonnante dans ce cas, mais avant et après la transition, ce n'est pas un problème: Dans l'expansion (height: auto), tout le contenu a toujours la bonne hauteur (contrairement à si vous choisissez un max-heightcela s'avère être trop bas). Et dans l'état effondré, la hauteur est zéro comme il se doit.

Démo

Voici une démo avec trois éléments pliables, tous de hauteurs différentes, qui utilisent tous le même CSS. Vous pouvez cliquer sur "full page" après avoir cliqué sur "run snippet". Notez que le JavaScript ne fait que basculer collapsed Classe CSS, il n'y a pas de mesure en cause. (Vous pouvez faire cette démo exacte sans JavaScript du tout en utilisant une case à cocher ou :target). Notez également que la partie du CSS responsable de la transition est assez courte et que le code HTML ne nécessite qu'un seul élément wrapper supplémentaire.

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

Comment ça marche?

Il y a en fait deux les transitions impliquées dans la réalisation de cet objectif. L'un d'eux transite le margin-bottom de 0px (dans l'état étendu) à -2000px dans l'état effondré (semblable à cette réponse). Le 2000 est le premier nombre magique, il est basé sur l'hypothèse que votre boîte ne sera pas plus haute que celle-ci (2000 pixels semble être un choix raisonnable).

En utilisant le margin-bottom la transition seule a deux problèmes:

  • Si vous avez réellement une boîte qui est supérieure à 2000 pixels, alors margin-bottom: -2000px ne va pas tout cacher - il y aura des choses visibles même dans le cas effondré. C'est une correction mineure que nous ferons plus tard.
  • Si la boîte actuelle est, disons, de 1000 pixels de haut, et que votre transition est longue de 300ms, alors la visible la transition est déjà terminée après environ 150ms (ou, dans le sens inverse, commence 150ms en retard).

La fixation de ce second problème est l'endroit où la deuxième transition arrive, et cette transition cible conceptuellement le wrapper le minimum hauteur ("conceptuellement" parce que nous n'utilisons pas réellement le min-height propriété pour cela; plus sur cela plus tard).

Voici une animation qui montre comment combiner la transition de la marge inférieure avec la transition de hauteur minimale, toutes deux de durée égale, nous donne une transition combinée de la hauteur totale à la hauteur zéro qui a la même durée.

animation as described above

La barre de gauche montre comment la marge inférieure négative pousse le bas vers le haut, réduisant la hauteur visible. La barre du milieu montre comment la hauteur minimale assure que dans le cas de l'effondrement, la transition ne se termine pas tôt, et dans le cas en expansion, la transition ne commence pas en retard. La barre de droite montre comment la combinaison des deux entraîne la transition de la hauteur totale à la hauteur zéro dans la bonne durée.

Pour ma démo, j'ai choisi 50px comme valeur de hauteur minimale. C'est le deuxième nombre magique, et il devrait être inférieur à la taille de la boîte. 50px semble raisonnable aussi bien; Il semble improbable que vous vouliez très souvent faire un élément pliable qui n'a même pas 50 pixels de haut en premier lieu.

Comme vous pouvez le voir dans l'animation, la transition résultante est continue, mais elle n'est pas différentiable - au moment où la hauteur minimale est égale à la hauteur totale ajustée par la marge inférieure, il y a un changement soudain de vitesse. Cela est très visible dans l'animation, car elle utilise une fonction de synchronisation linéaire pour les deux transitions et parce que la transition est très lente. Dans le cas actuel (ma démo en haut), la transition ne prend que 300ms, et la transition de la marge inférieure n'est pas linéaire. J'ai joué avec beaucoup de différentes fonctions de synchronisation pour les deux transitions, et celles avec lesquelles j'ai fini par se sentir comme ils ont fonctionné le mieux pour la plus grande variété de cas.

Deux problèmes restent à résoudre:

  1. le point d'en haut, où les boîtes de plus de 2000 pixels de hauteur ne sont pas complètement cachées dans l'état replié,
  2. et le problème inverse, où dans le cas non caché, les boîtes de moins de 50 pixels de hauteur sont trop élevées même lorsque la transition n'est pas en cours, car la hauteur minimale les maintient à 50 pixels.

Nous résolvons le premier problème en donnant à l'élément conteneur un max-height: 0 dans le cas effondré, avec un 0s 0.3s transition. Cela signifie que ce n'est pas vraiment une transition, mais la max-height est appliqué avec un retard; cela ne s'applique qu'une fois la transition terminée. Pour que cela fonctionne correctement, nous devons également choisir un max-height pour le contraire, non-effondré, état. Mais contrairement au cas 2000px, où choisir un nombre trop important affecte la qualité de la transition, dans ce cas, cela n'a pas vraiment d'importance. Nous pouvons donc choisir un nombre si élevé que nous connaître qu'aucune hauteur ne se rapprochera jamais de cela. J'ai choisi un million de pixels. Si vous pensez devoir supporter un contenu de plus d'un million de pixels, alors 1) Je suis désolé, et 2) ajoutez juste quelques zéros.

Le deuxième problème est la raison pour laquelle nous n'utilisons pas réellement min-height pour la transition en hauteur minimale. Au lieu de cela, il y a un ::after pseudo-élément dans le conteneur avec un height que les transitions de 50px à zéro. Cela a le même effet qu'un min-height: Il ne laissera pas le conteneur rétrécir en dessous de la hauteur que le pseudo-élément a actuellement. Mais parce que nous utilisons height, ne pas min-height, nous pouvons maintenant utiliser max-height (à nouveau appliqué avec un délai) pour mettre à zéro la hauteur réelle du pseudo-élément une fois la transition terminée, en s'assurant qu'au moins en dehors de la transition, même les petits éléments ont la bonne hauteur. Car min-height est plus forte que max-height, cela ne fonctionnerait pas si nous utilisions le conteneur min-height au lieu du pseudo-élément height. Tout comme le max-height dans le paragraphe précédent, cette max-height a également besoin d'une valeur pour la fin opposée de la transition. Mais dans ce cas, nous pouvons simplement choisir le 50px.

Testé dans Chrome (Win, Mac, Android, iOS), Firefox (Win, Mac, Android), Edge, IE11 (sauf un problème de mise en page flexbox avec ma démo que je n'ai pas pris en charge le débogage), et Safari (Mac, iOS ). En parlant de flexbox, il devrait être possible de faire ce travail sans utiliser de flexbox; En fait, je pense que vous pouvez faire presque tout fonctionner dans IE7 - sauf pour le fait que vous n'aurez pas de transitions CSS, ce qui en fait un exercice plutôt inutile.


45
2018-05-14 14:33



Une solution de contournement visuelle à l'animation de la hauteur à l'aide des transitions CSS3 consiste à animer le remplissage à la place.

Vous n'obtenez pas tout à fait l'effet de balayage complet, mais en jouant avec les valeurs de durée de transition et de remplissage, vous devriez vous rapprocher suffisamment. Si vous ne voulez pas définir explicitement height / max-height, cela devrait être ce que vous cherchez.

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/ (riffé au-dessus de jsFiddle de stephband)


44
2018-06-26 19:05



Ma solution consiste à faire passer max-height à la hauteur exacte du contenu pour une belle animation lisse, puis utiliser un callback de transitionEnd pour définir max-height à 9999px afin que le contenu puisse être redimensionné librement.

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



La réponse acceptée fonctionne dans la plupart des cas, mais elle ne fonctionne pas div peut varier considérablement en hauteur - la vitesse d'animation ne dépend pas de la hauteur réelle du contenu, et il peut sembler saccadé.

Vous pouvez toujours effectuer l'animation réelle avec CSS, mais vous devez utiliser JavaScript pour calculer la hauteur des éléments, au lieu d'essayer d'utiliser auto. Aucun jQuery n'est requis, mais vous devrez peut-être le modifier un peu si vous voulez une compatibilité (fonctionne dans la dernière version de 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



Utilisation max-height avec des facilités de transition différentes et des délais pour chaque état.

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

Voir l'exemple: http://jsfiddle.net/0hnjehjc/1/


23
2017-12-16 23:35



Aucune valeur codée en dur

Pas de JavaScript.

Pas d'approximations.

L'astuce consiste à utiliser un caché et dupliqué div pour que le navigateur comprenne ce que 100% signifie.

Cette méthode est appropriée chaque fois que vous pouvez dupliquer le DOM de l'élément que vous souhaitez animer.

.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%;
}
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>


21
2018-02-26 17:19