schermo - scalare immagine background css




Come posso cambiare altezza: 0; ad altezza: auto; usando i CSS? (20)

Al momento non è possibile animare in altezza quando una delle altezze coinvolte è auto , è necessario impostare due altezze esplicite.

Sto provando a far scorrere <ul> verso il basso usando le transizioni CSS.

<ul> inizia height: 0; . Al passaggio del mouse, l'altezza è impostata su height:auto; . Tuttavia, questo sta causando semplicemente apparire, non la transizione,

Se lo faccio da height: 40px; ad height: auto; , quindi scorrerà fino height: 0; e poi balzare all'improvviso all'altezza corretta.

In quale altro modo potrei farlo senza usare 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>


Dovresti invece usare scaleY.

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

Ho creato una versione con prefisso del fornitore del suddetto codice su jsfiddle, http://jsfiddle.net/dotnetCarpenter/PhyQc/9/ e ho cambiato il tuo jsfiddle per usare scaleY invece di height, http://jsfiddle.net/dotnetCarpenter/7cnfc/206/ .


La soluzione che ho sempre usato è stata quella di sfumare prima, quindi ridurre i valori di font-size , padding e margin . Non ha lo stesso aspetto di una salvietta, ma funziona senza height statica o height max-height .

Esempio di lavoro:

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

<p>Another paragraph...</p>


Puoi, con un po 'di follia non semantica. Il mio approccio abituale è quello di animare l'altezza di un DIV esterno che ha un singolo figlio che è un DIV senza stile utilizzato solo per misurare l'altezza del contenuto.

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>

Uno vorrebbe essere in grado di fare a meno di .measuringWrapper e basta impostare l'altezza del DIV su auto e farlo animare, ma non sembra funzionare (l'altezza viene impostata, ma non si verifica alcuna animazione).

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>

La mia interpretazione è che è necessaria un'altezza esplicita per l'animazione da eseguire. Non è possibile ottenere un'animazione in altezza quando l'altezza (l'altezza iniziale o finale) è auto .


Una soluzione visiva per animare l'altezza usando le transizioni CSS3 è invece di animare il padding.

Non si ottiene abbastanza l'effetto wipe, ma giocare con i valori di durata di transizione e padding dovrebbe avvicinarti abbastanza. Se non vuoi impostare in modo esplicito altezza / altezza massima, questo dovrebbe essere quello che stai cercando.

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/ (sfogliato stephband sopra jsFiddle)


Usa la max-height nella trasformazione e non l' height . E imposta un valore sull'altezza max-height qualcosa di più grande che il tuo box non otterrà mai.

Vedi la demo di JSFiddle fornita da Chris Jordan in un'altra answer qui.

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


Soluzione Flexbox

Professionisti:

  • semplice
  • no JS
  • transizione graduale

Contro:

  • l'elemento deve essere inserito in un contenitore flessibile di altezza fissa

Il modo in cui funziona è quello di avere sempre una base flessibile: auto sull'elemento con contenuto, e la transizione di flex-grow e flex-shrink.

Modifica: JS Fiddle migliorato ispirato all'interfaccia Xbox One.

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

JS Fiddle


Espandendo la risposta di @ jake, la transizione raggiungerà il valore massimo di altezza, causando un'animazione estremamente veloce: se imposti le transizioni per entrambi: passa il mouse su e giù puoi controllare un po 'di più la velocità pazza.

Quindi il li: hover è quando il mouse entra nello stato e quindi la transizione sulla proprietà non librata sarà il congedo del mouse.

Speriamo che questo sia di qualche aiuto.

per esempio:

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

Ecco un violino: http://jsfiddle.net/BukwJ/


La risposta di Jake per animare l'altezza massima è ottima, ma ho trovato che il ritardo causato dall'impostazione di una grande altezza massima fastidiosa.

Si potrebbe spostare il contenuto collassabile in un div interno e calcolare l'altezza massima ottenendo l'altezza del div interno (tramite JQuery sarebbe l'altezza esterna ()).

$('button').bind('click', function(e) { 
  e.preventDefault();
  w = $('#outer');
  if (w.hasClass('collapsed')) {
    w.css({ "max-height": $('#inner').outerHeight() + 'px' });
  } else {
    w.css({ "max-height": "0px" });
  }
  w.toggleClass('collapsed');
});

Ecco un link jsfiddle: http://jsfiddle.net/pbatey/duZpT

Ecco un jsfiddle con la quantità minima di codice richiesta: http://jsfiddle.net/8ncjjxh8/


Mi rendo conto che questo thread sta invecchiando, ma è in cima alle ricerche di Google, quindi penso che valga la pena aggiornarlo.

È anche possibile ottenere / impostare la stessa altezza dell'elemento:

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

Dovresti scaricare questo Javascript immediatamente dopo il tag di chiusura di target_box in un tag script in linea.


Non ho letto tutto in dettaglio ma ho avuto questo problema di recente e ho fatto quanto segue:

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

Questo ti permette di avere un div che all'inizio mostra contenuti fino a 200px height e su hover la sua dimensione diventa almeno pari all'intero contenuto del div. Il Div non diventa 3000px ma 3000px è il limite che sto imponendo. Assicurati di avere la transizione sul non: al passaggio del mouse, altrimenti potresti ottenere un rendering strano. In questo modo il: hover eredita dal non: hover.

La transizione non funziona da px in% o in automatico. Devi usare la stessa unità di misura. Questo funziona bene per me. L'utilizzo di HTML5 lo rende perfetto ....

Ricorda che c'è sempre un lavoro in giro ...; )

Spero che qualcuno lo trovi utile


Puoi passare dall'altezza: da 0 ad altezza: auto fornendo anche l'altezza minima e l'altezza massima.

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

div.stretchy.visible{
    height: auto;
    min-height:40px;
    max-height:400px;
}

C'è stata poca menzione della Element.scrollHeightproprietà che può essere utile qui e può ancora essere utilizzata con una transizione CSS pura. La proprietà contiene sempre l'altezza "completa" di un elemento, indipendentemente dal fatto se e dal modo in cui il contenuto trabocca a causa dell'altezza compressa (ad esempio height: 0).

In quanto tale, per un height: 0elemento (effettivamente completamente collassato), la sua altezza "normale" o "piena" è ancora facilmente disponibile attraverso il suo scrollHeightvalore (invariabilmente una lunghezza di pixel ).

Per un tale elemento, supponendo che abbia già impostato la transizione come ad es. (Usando ulcome da domanda originale):

ul {
    height: 0;
    transition: height 1s; /* An example transition. */
}

Possiamo attivare la "espansione" animata desiderata, usando solo il CSS, con qualcosa di simile al seguente (qui assumendo che la ulvariabile si riferisca alla lista):

ul.style.height = ul.scrollHeight + "px";

Questo è tutto. Se è necessario comprimere l'elenco, verrà eseguita una delle due seguenti istruzioni:

ul.style.height = "0";
ul.style.removeProperty("height");

Il mio particolare caso d'uso ruotava intorno animare liste di notevoli lunghezze sconosciuti e spesso, quindi non era di assestamento comodo su un arbitrario "abbastanza grande" heighto max-heightspecifiche e rischiando il contenuto o il contenuto cut-off che improvvisamente necessario scorrere (se overflow: auto, per esempio) . Inoltre, l'alleggerimento e la tempistica sono interrotti con max-heightsoluzioni basate sul sistema, perché l'altezza utilizzata può raggiungere il suo valore massimo molto prima di quanto ci vorrebbe per max-heightraggiungere 9999px. E quando le risoluzioni dello schermo aumentano, le lunghezze dei pixel mi 9999pxlasciano l'amaro in bocca. Questa particolare soluzione risolve il problema in modo elegante, secondo me.

Infine, spero che le future revisioni dei CSS indirizzino gli autori a fare questo genere di cose in modo ancora più elegante - rivisitare la nozione di valori "calcolati" rispetto a "usati" e "risolti" e considerare se le transizioni dovrebbero applicarsi a valori, comprese le transizioni con widthe height(che attualmente ricevono un trattamento speciale).


EDIT: scorri verso il basso per la risposta aggiornata
stavo facendo un elenco a discesa e ho visto questo post ... molte risposte diverse ma ho deciso di condividere anche il mio elenco a discesa, ... non è perfetto ma almeno userà solo css per cadere in picchiata! Sto usando transform: translateY (y) per trasformare la lista in vista ...
Puoi vedere di più nel test
http://jsfiddle.net/BVEpc/4/
Ho messo div dietro ogni li perché my l'elenco a discesa sta venendo fuori e per mostrarli correttamente è stato necessario, il mio codice div è:

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

e hover è:

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

e dato che l'altezza di ul è impostata sul contenuto, può superare il contenuto del tuo corpo, ecco perché l'ho fatto per ul:

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

e passa il mouse:

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

la seconda volta dopo la transizione è in ritardo e verrà nascosto dopo che il mio elenco a discesa è stato chiuso in modo animato ...
Spero che qualcuno possa beneficiare di questo.

EDIT: Non riesco a credere che ppl usi effettivamente questo prototipo! questo menu a discesa è solo per un sottomenu e questo è tutto !! Ho aggiornato uno migliore che può avere due sottomenu per entrambe le direzioni ltr e rtl con supporto IE 8.
Fiddle for LTR
Fiddle for RTL
spero che qualcuno lo trovi utile in futuro.


Ecco una soluzione che ho appena usato in combinazione con jQuery. Questo funziona per la seguente struttura HTML:

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

e la funzione:

    $('#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);
    });

È quindi possibile utilizzare una funzione di clic per impostare e rimuovere l'altezza utilizzando css()

$('#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');
})

CSS:

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

La risposta accettata funziona per la maggior parte dei casi, ma non funziona bene quando il tuo divpuò variare notevolmente in altezza - la velocità dell'animazione non dipende dall'altezza reale del contenuto e può sembrare instabile.

È comunque possibile eseguire l'animazione effettiva con i CSS, ma è necessario utilizzare JavaScript per calcolare l'altezza degli elementi, invece di provare a utilizzarli auto. Non è richiesto jQuery, anche se potrebbe essere necessario modificarlo un po 'se si desidera la compatibilità (funziona nell'ultima versione di 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>


Mentre pubblico questo post ci sono già oltre 30 risposte, ma sento che la mia risposta migliora sulla risposta già accettata da jake.

Non ero soddisfatto del problema che deriva dal semplice utilizzo max-heighte dalle transizioni CSS3, poiché, come hanno notato molti commentatori, è necessario impostare il max-heightvalore molto vicino all'altezza effettiva o si otterrà un ritardo. Vedi questo JSFiddle per un esempio di questo problema.

Per aggirare questo problema (mentre non utilizzo ancora JavaScript), ho aggiunto un altro elemento HTML che modifica il transform: translateYvalore CSS.

Ciò significa che entrambi max-heighte translateYsono utilizzati: max-heightpermette l'elemento a spingere verso il basso gli elementi di sotto di essa, mentre translateYdà l'effetto "immediato" vogliamo. Il problema con max-heightesiste ancora, ma il suo effetto è diminuito. Ciò significa che puoi impostare un'altezza molto più grande per il tuo max-heightvalore e preoccuparti di meno.

Il vantaggio generale è che durante la transizione di nuovo (il collasso), l'utente vede translateYimmediatamente l' animazione, quindi non importa quanto siano lunghi i max-heighttake.

Soluzione come Fiddle

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


Ok, quindi penso di aver trovato una risposta super semplice ... no max-height, usa il relativeposizionamento, lavora sugli lielementi, ed è puro CSS. Non ho provato nulla tranne Firefox, anche se a giudicare dal CSS, dovrebbe funzionare su tutti i browser.

FIDDLE: http://jsfiddle.net/n5XfG/2596/

CSS

.wrap { overflow:hidden; }

.inner {
            margin-top:-100%;
    -webkit-transition:margin-top 500ms;
            transition:margin-top 500ms;
}

.inner.open { margin-top:0px; }

HTML

<div class="wrap">
    <div class="inner">Some Cool Content</div>
</div>

Recentemente ho implementato la transizione max-heightsugli lielementi piuttosto che sul wrapping ul.

Il ragionamento è che il ritardo per i piccoli max-heightsè molto meno evidente (se non del tutto) rispetto alle grandi max-heights, e posso anche impostare il mio max-heightvalore relativo al font-sizedel lipiuttosto che un numero enorme arbitrario utilizzando emso rems.

Se la dimensione del mio carattere è 1rem, imposterò max-heightqualcosa come 3rem(per accogliere il testo in rilievo). Puoi vedere un esempio qui:

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


Sono stato in grado di farlo. Ho un .child& a .parentdiv. Il div bambino si adatta perfettamente alla larghezza / altezza del genitore con il absoluteposizionamento. Quindi animare la translateproprietà per spingere il suo Yvalore verso il basso 100%. La sua animazione molto liscia, senza difetti o lati negativi come qualsiasi altra soluzione qui.

Qualcosa come questo, pseudo codice

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

Si potrebbe specificare un heightsu .parent, in px, %o lasciare come auto. Questo div allora maschera il .childdiv quando scivola verso il basso.





css-transitions