Eu sunt încercarea de a face un <ul>
alunece în jos, folosind tranziții CSS.
De <ul>
incepe de la înălțime: 0;. Pe hover, înălțimea este setată la
înălțime:auto;`. Cu toate acestea, acest lucru este determinând-o să apară pur și simplu, nu ** tranziție,
Dacă aș face-o din înălțime: 40px; " la " înălțime: auto;
, atunci se va glisați în sus pentru a înălțime: 0;
, apoi sări brusc de la înălțimea corectă.
Cum altfel am putea face acest lucru fără a utiliza 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>
Folosesc max-înălțimea în tranziție și nu o "înălțime". Și a stabilit o valoare pe max-height` a ceva mai mare decât cutia ta nu va ajunge vreodată.
A se vedea [JSFiddle demo](
), furnizate de către Chris Jordan într-un alt răspunde aici.#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>
Ar trebui să utilizați scaleY în loc.
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);
}
Am'am facut un furnizor prefixate versiune de codul de mai sus pe jsfiddle,
și-a schimbat jsfiddle de a utiliza scaleY în loc de înălțime, http://jsfiddle.net/dotnetCarpenter/7cnfc/206/.Soluția pe care am'am folosit mereu a fost pentru prima fade out, apoi micsora font-size
, padding " și " marja de valori. Nu't arata la fel ca o ștergeți, dar funcționează fără un statice de înălțime " sau " max-height
.
Exemplu de lucru:
/* 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>
Știu că acest lucru este de treizeci-somethingth răspunsul la această întrebare, dar cred că's merită, deci, aici merge. Aceasta este o CSS-doar soluție cu următoarele proprietăți:
transforma: scaleY(0)
), așa că face un lucru bun, dacă nu's de conținut după pliabil element. înălțime: auto
) de stat, întregul conținut are întotdeauna înălțimea corectă (spre deosebire de exemplu, dacă alegeți un max-height` care se dovedește a fi prea mică). Și în stare pliată, înălțimea este zero, așa cum ar trebui. Aici's un demo cu trei pliabil elemente, toate de diferite înălțimi, care toate folosesc același CSS. Ați putea dori să faceți clic pe "full page" după ce faceți clic pe "rula fragment". Rețineți că JavaScript numai comută la "colaps" clasa CSS, acolo's nici de măsurare implicate. (Ai putea face exact acest demo, fără nici JavaScript la toate folosind o casetă de selectare sau o țintă
). De asemenea, rețineți că o parte din CSS care's responsabil pentru trecerea este destul de scurt, și HTML necesită doar un singur suplimentare înveliș element.
$(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>
Există, de fapt, două tranziții implicat în a face acest lucru. Unul dintre ei tranziții margin-bottom
din 0px (în stare extinsă) a -2000px în stare pliată (similar cu [acest răspuns](https://stackoverflow.com/a/25200087/115866)). 2000 aici este primul număr de magie, l's-a bazat pe presupunerea că caseta a câștigat't fi mai mare decât aceasta (2000 pixeli pare o alegere rezonabilă). Folosind
margin-bottom` tranziție singur de sine are două aspecte:
max-height: 0
în care s-a prăbușit caz, cu o 0s 0.3 s
tranziție. Acest lucru înseamnă că l'nu e chiar o tranziție, dar max-height
este aplicat cu o întârziere; se aplică numai după tranziția este de peste. Pentru ca aceasta să funcționeze corect, trebuie, de asemenea, pentru a alege un numerice max-înălțimea de vizavi, non-s-a prăbușit, de stat. Dar spre deosebire de 2000px caz, în cazul în care culesul este prea mare dintr-un număr afectează calitatea de tranziție, în acest caz, este într-adevăr nu't contează. Deci, putem alege doar un număr care este atât de mare încât ne *știu* că nici înălțimea va veni vreodată aproape de acest lucru. Am luat un milion de pixeli. Daca simti ca ai putea avea nevoie pentru a sprijini conținut de la o înălțime de mai mult de un milion de pixeli, apoi 1) I'm rău, și 2) trebuie doar să adăugați o pereche de zerouri. A doua problemă este motivul pentru care ne-am're nu sunt de fapt, folosind
min-height pentru înălțime minimă de tranziție. În schimb, există o ::după pseudo-element din container cu o "înălțime" că tranzițiile de la 50px la zero. Acest lucru are același efect ca și o
min-height: nu Se va't să container reduce sub orice înălțime pseudo-element are în prezent. Dar pentru că ne-am're folosind "înălțime", nu
min-inaltime, putem folosi acum
max-height(din nou aplicat cu o întârziere) pentru a seta pseudo-element's înălțime efectivă la zero o dată tranziția este de peste, asigurându-se că cel puțin în afara de tranziție, chiar și mici elemente au înălțimea corectă. Pentru că
min-heighteste [puternic](https://stackoverflow.com/q/13845224/115866) decât
max-height, ar't de lucru dacă am folosit recipientul's
min-heightîn loc de pseudo-element's "înălțime". La fel ca
max-înălțimea în paragraful anterior, această max-height` trebuie, de asemenea, o valoare pentru capătul opus al tranziției. Dar în acest caz, putem alege doar 50px.
Testat în Chrome (Win, Mac, Android, iOS), Firefox (Win, Mac, Android), Edge, IE11 (cu excepția pentru o flexbox layout problema cu demo-ul meu pe care am't deranjez debugging) și Safari (Mac, iOS). Vorbind de flexbox, ar trebui să fie posibil să se facă acest lucru fără a utiliza orice flexbox; în fapt, cred că ai putea face aproape totul muncă în IE7 – cu excepția faptului că ai câștigat't au tranziții CSS, făcându-l un exercițiu destul de inutil. Puteți, cu un pic de non-semantice jiggery-pokery. Mea obișnuită de abordare este de a anima o înălțime de un exterior DIV care are un singur copil, care este un stil mai puțin DIV utilizate numai pentru măsurarea înălțimii de conținut.
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>
Unul ar dori să fie în măsură să renunțe la `.measuringWrapper și setați DIV's înălțimea la auto și care anima, dar asta nu't pare la locul de muncă (înălțimea ajunge, dar nu animație apare).
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>
Interpretarea mea este că o explicită înălțime este necesar pentru animație pentru a rula. Puteți't obține o animație pe înălțime atunci când înălțimea (la începutul sau la sfârșitul înălțime) este "auto".
Un vizual soluție pentru animarea înălțime folosind CSS3 tranziții este de a anima umplutură în loc.
Nu't obține destul de complet ștergeți efect, dar să joci în jurul cu trecerea-durata și umplutură valori ar trebui sa ai destul de aproape. Dacă tu nu't doriți să setați explicit înălțime/max-înălțimea, acest lucru ar trebui să fie ceea ce're în căutarea pentru.
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;
}
Mea soluție este să tranziție max-înălțimea la conținutul exact inaltimea de un frumos animație netedă, apoi utilizați un transitionEnd de apel invers pentru a seta max-înălțimea la 9999px astfel încât conținutul poate redimensiona în mod liber.
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>
La răspunsul acceptat de lucrări pentru cele mai multe cazuri, dar nu't funcționează bine atunci când ți div
poate varia foarte mult în înălțime — viteza de animație nu este dependentă de înălțimea efectivă de conținut, și poate privi agitat.
Încă puteți efectua animație real cu CSS, dar ai nevoie pentru a folosi JavaScript pentru a calcula înălțimea de articole, în loc de încercarea de a folosi "auto". Nu jQuery este necesară, deși este posibil să aveți pentru a modifica acest lucru un pic daca vrei compatibilitate (funcționează în cea mai recentă versiune de Chrome :)).
fereastra.toggleExpand = function(element) { dacă (!element.stil.înălțime || element.stil.înălțime == '0px') { element.stil.înălțime = Array.prototip.reduce.apel(element.childNodes, funcția(p, c) {return p + (c.offsetHeight|| 0);}, 0) + 'px'; } else { element.stil.înălțime = '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>
Nu a fost puțin mai vorbim de Element.scrollHeight
proprietăți care pot fi utile aici și încă mai pot fi utilizate, cu o pură CSS tranziție. Proprietatea conține întotdeauna "plin" înălțimea de un element, indiferent dacă și cum conținutul său se revarsă ca urmare a prăbușit înălțime (de exemplu, înălțime: 0
).
Ca atare, pentru o înălțime: 0
(efectiv s-a prăbușit complet) element, sale "normale" sau "plin" înălțimea este încă disponibil prin intermediul scrollHeight
valoare (invariabil o pixel lungime).
Pentru un astfel de element, presupunând că are deja tranziția înființat ca de exemplu (folosind ul
ca pe original întrebare):
ul {
height: 0;
transition: height 1s; /* An example transition. */
}
Putem declanșa dorit animate "extinderea" de înălțime, folosind doar CSS, cu ceva de genul următor (aici presupunand ca ul
variabilă se referă la lista):
ul.style.height = ul.scrollHeight + "px";
Ca's a. Dacă aveți nevoie pentru a restrânge lista, oricare dintre următoarele două declarații va face:
ul.style.height = "0";
ul.style.removeProperty("height");
Mi anumit caz de utilizare se învârte în jurul animarea liste de necunoscute și de multe ori lungimi considerabile, așa că nu a fost confortabil de a ajunge la un arbitrar "suficient de mare" înălțime " sau " max-înălțimea caietul de sarcini si risca cut-off de conținut sau conținut dintr-o dată aveți nevoie pentru a defila (dacă overflow: auto
, de exemplu). În plus, relaxarea și calendarul este rupt cu max-heightbazate pe soluții, pentru că a folosit înălțime poate ajunge la valoarea sa maximă, mult mai devreme decât ar fi nevoie pentru max-height
a ajunge 9999px
. Și ca rezoluțiile de ecran crească, pixel lungimi de ca 9999px
a lăsat un gust rău în gură. Special, această soluție rezolvă problema într-un mod elegant, în opinia mea.
În cele din urmă, aici este speranța că viitoarele revizuiri ale CSS adresa autorilor' trebuie să faci astfel de lucruri chiar mai elegant -- revizuiesc ideea de "calculat" vs "folosit" și "rezolvat" valori, și ia în considerare dacă tranziții ar trebui să se aplice valorile calculate, inclusiv tranziții cu "lățime" și "înălțime" (care, în prezent, un pic de un tratament special).
Folosesc max-height` cu diferite relaxarea tranziție și de întârziere pentru fiecare stat.
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;
}
A se vedea de exemplu:
Nu e greu de valori codificate.
Nu JavaScript.
Nu aproximări.
Trucul este de a utiliza o ascunse & duplicat div
pentru a obține browser-ul pentru a înțelege ceea ce 100% înseamnă.
Această metodă este potrivită ori de câte ori te're în măsură să duplicat DOM a elementului doriți să anima.
.exterior { frontieră: punctată roșie 1px; position: relative; }
.dummy { visibility: hidden; }
.real { position: absolute; background: yellow; inaltime: 0; tranziție: înălțime de 0,5 s; overflow: ascuns; }
.exterior:hover>.real { înălțime: 100%; }
Plasați cursorul pe caseta de mai jos:
Ca am posta acest lucru, există peste 30 de răspunsuri deja, dar simt răspunsul meu îmbunătățește pe cele deja răspunsul acceptat de jake.
Am fost nu de conținut cu problema asta apare de la pur și simplu, folosind max-înălțimea și tranziții CSS3, deoarece, după cum mulți comentatori remarcat, trebuie să setați max-height
valoare foarte aproape de înălțimea efectivă sau'll obține o întârziere. Vezi asta [JSFiddle](
Pentru a obține în jurul valorii de acest lucru (în timp ce încă folosind nu JavaScript), am adăugat un alt element HTML care tranzitia transforma: translateY
CSS valoare.
Acest lucru înseamnă max-înălțimea " și " translateYsunt utilizate:
max-heightpermite element pentru a împinge în jos elementele de mai jos, în timp ce
translateYdă "instant" efect vrem. Problema cu max-height
încă mai există, dar efectul este diminuat.
Acest lucru înseamnă că puteți seta o mult mai mare înălțime pentru max-height` valoare și vă faceți griji mai puțin.
Beneficiul global este faptul că la trecerea înapoi în (prăbușirea), utilizatorul vede translateY
de animație imediat, așa că nu - 't contează cât de lung max-height
ia.
[Soluție ca Vioara](https://jsfiddle.net/ajo89vmg/)
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, deci cred că a venit cu un super-simplu raspunsul...
nu max-height
, folosește "rudă" de poziționare, funcționează pe li
elemente, & este pur CSS.
Nu am testat in nimic, dar Firefox, deși judecând după CSS, acesta ar trebui să funcționeze pe toate browserele.
VIOARA:
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>
EDIT: Derulați în jos pentru actualizare răspuns
Am fost a face o listă derulantă și am văzut acest Post ... mai multe răspunsuri diferite, dar mă decid să-mi împărtășesc drop jos listă, ... L's nu este perfect, dar cel puțin va folosind doar css pentru a drop jos! Am'am fost folosind transforma:translateY(y) pentru a transforma lista la vedere ...
Puteți vedea mai multe în test
#menu div {
transition: 0.5s 1s;
z-index:-1;
-webkit-transform:translateY(-100%);
-webkit-transform-origin: top;
}
și hover este :
#menu > li:hover div {
transition: 0.5s;
-webkit-transform:translateY(0);
}
și pentru că ul înălțimea este setată la conținutul se poate obține corpul de conținut, care's de ce am făcut acest lucru pentru ul:
#menu ul {
transition: 0s 1.5s;
visibility:hidden;
overflow:hidden;
}
și hover:
#menu > li:hover ul {
transition:none;
visibility:visible;
}
a doua oară, după tranziție este în întârziere și va fi ascuns după listă derulantă a fost închis animately ...
Sper că mai târziu, cineva obține un beneficiu din asta.
EDIT: nu pot't cred ppl de fapt, folosind acest prototip! acest meniu drop-down este doar pentru un sub-meniu și ca's toate!!
Am'am actualizat-o mai bine una care poate avea două sub-meniu pentru ambele ltr și rtl direcție cu IE 8 sprijin.
[Vioara pentru LTR][1]
[Vioara pentru RTL][2]
să sperăm că cineva a găsi acest util în viitor.
Puteți tranziția de la înălțime:de la 0 la înălțime:auto care prevede că ai oferi, de asemenea, min-înălțime și max-înălțimea.
div.stretchy{
transition: 1s linear;
}
div.stretchy.hidden{
height: 0;
}
div.stretchy.visible{
height: auto;
min-height:40px;
max-height:400px;
}
Flexbox Soluție
Pro:
Contra:
Modul în care funcționează este de a avea întotdeauna flex-baza: auto pe element cu conținut, și trecerea flex-să crească și flex-psihiatru în loc.
Edit: Îmbunătățirea JS Vioara inspirat de Xbox One interfață.
* {
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 Vioara][1]
Cred că am venit cu o soluție solidă
OK! Știu că această problemă este la fel de vechi ca internetul, dar cred că am o soluție pe care am transformat într-o plugin numit mutant-tranziție. Soluția mea setează style=""
atribute pentru senile elemente ori de câte ori există o schimbare în DOM. rezultatul final este că puteți folosi bună ole CSS pentru tranziții și nu utilizați hacky remedieri sau speciale javascript. Singurul lucru ce trebuie să faceți este să stabiliți ce doriți să urmăriți pe elementul în cauză, folosind datele-mutant-atribute="X"`.
<div data-mutant-attributes="height">
This is an example with mutant-transition
</div>
Asta e! Această soluție folosește MutationObserver pentru a urmări modificările în DOM. Din aceasta cauza, nu't chiar trebuie să setați nimic sau de a folosi javascript pentru manual anima lucrurile. Modificările sunt urmărite în mod automat. Cu toate acestea, deoarece foloseste MutationObserver, acest lucru va numai de tranziție în IE11+. <IE11 va vedea snap-modificări (de tranziție).
Viori!
înălțime: auto " la " height: 100%
][3]înălțime: auto
atunci când adăugarea de copii][4]Jake's a răspunde pentru a anima max-înălțimea este mare, dar nu am gasit întârzierea cauzată prin stabilirea unei mari max-înălțimea enervant.
S-ar putea muta la collapsable conținut într-un interior div și se calculează înălțimea maximă de obtinerea înălțimea interioară div (prin JQuery l'd outerHeight()).
$('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');
});
Aici's o jsfiddle link-ul:
/embedded/result,js,html,css/">Aici's o jsfiddle cu absolut minim cantitatea de cod necesar: http://jsfiddle.net/8ncjjxh8/
Extinderea pe @jake's a răspunde, tranziția va merge tot drumul până la înălțimea maximă valoare, provocând o extrem de rapid de animație - dacă setați tranziții pentru ambele :treceți și pe atunci puteți controla viteza de nebun un pic mai mult.
Deci li:hover este atunci când mouse-ul intră în stat și apoi trecerea de la non-planat proprietate va fi mouse-ul plece.
Sperăm că acest lucru va fi de ajutor.
e.g:
.sidemenu li ul {
max-height: 0px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}
.sidemenu li:hover ul {
max-height: 500px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
/* Adjust speeds to the possible height of the list */
Aici's o vioara: