CSS geçişlerini kullanarak bir <ul>
aşağı kaydırmaya çalışıyorum.
lt;ul>,
height: 0;ile başlar. Üzerine gelindiğinde, yükseklik
height:auto;` olarak ayarlanır. Ancak bu, geçiş yapmamasına değil sadece görünmesine neden oluyor,
Eğer height: 40px;
'den height: auto;
'ya yaparsam, o zaman height: 0;
'a kadar kayacak ve sonra aniden doğru yüksekliğe atlayacak.
JavaScript kullanmadan bunu başka nasıl yapabilirim?
#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>
Biraz semantik olmayan şakalarla bunu yapabilirsiniz. Benim her zamanki yaklaşımım, yalnızca içerik yüksekliğini ölçmek için kullanılan stilsiz bir DIV olan tek bir çocuğa sahip bir dış DIV'in yüksekliğini canlandırmaktır.
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>
Birisi sadece .measuringWrapper
dan vazgeçebilmek ve sadece DIV'in yüksekliğini otomatik olarak ayarlamak ve bunun canlandırılmasını sağlamak ister, ancak bu işe yaramıyor gibi görünüyor (yükseklik ayarlanıyor, ancak animasyon gerçekleşmiyor).
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>
Benim yorumum, animasyonun çalışması için açık bir yüksekliğe ihtiyaç duyulduğu yönünde. Yüksekliklerden biri (başlangıç ya da bitiş yüksekliği) auto
olduğunda yükseklikle ilgili bir animasyon elde edemezsiniz.
min-height ve max-height değerlerini de sağlamanız koşuluyla height:0'dan height:auto'ya geçiş yapabilirsiniz.
div.stretchy{
transition: 1s linear;
}
div.stretchy.hidden{
height: 0;
}
div.stretchy.visible{
height: auto;
min-height:40px;
max-height:400px;
}