一個div的CSS過渡不生成

Question

當我點擊div時，我想要第二個div展開/摺疊。這是使用JS，HTML和CSS完成的。現在我想把CSS轉換爲動畫。

現在我所得到的只是一個跳躍擴展，或者是一個滾動（邊緣）或一個等待（Chrome，Opera，Firefox）之後的跳轉。

我試着把高度設置爲1px而不是0px，但是這並沒有改變任何東西。

function growDiv(id) { 
 
    var ele = document.getElementById(id); 
 
    if (ele.style.height == '100%') { 
 
    ele.style.height = '0px'; 
 
    } else { 
 
    ele.style.height = '100%'; 
 
    } 
 
}

.main { 
 
    font-weight: 700; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
} 
 
.secondary { 
 
    -webkit-transition: height .5s ease; 
 
    -moz-transition: height .5s ease; 
 
    -ms-transition: height .5s ease; 
 
    -o-transition: height .5s ease; 
 
    transition: height .5s ease; 
 
    overflow: hidden; 
 
    padding-left: 20px; 
 
    height: 0px; 
 
    cursor: pointer; 
 
}

<div class="main" onclick="growDiv('expandable')"> 
 
    Expand 
 
</div> 
 
<div class="secondary" id="expandable" onclick="growDiv('expandable')"> 
 
    number1, 
 
    <br>number2, 
 
    <br>number3, 
 
    <br>number4. 
 
</div>

Codepen的行爲，因爲我知道完整的網站呢，所以良好的措施;這裏的codepen：http://codepen.io/anon/pen/ezJQjM

Answer 1

你願意使用jQuery它提供了一些很酷的動畫的可能性，並可能完成你正在嘗試做這僅僅是一種可能的選擇你的方法

看看我的提琴在這裏：。

https://jsfiddle.net/3mo28z1t/11/

<div class="main" id="clicker"> 
    Expand 
</div> 
<div class="secondary" id="expandable"> 
    number1, <br> number2, <br> number3, <br> number4. 
</div> 

<script> 
$(document).ready(function() { 

$(".secondary").hide(); 

$(document).ready(
    function(){ 
     $("#clicker").click(function() { 
      $(".secondary").toggle("slow"); 
     }); 

    }); 

}); 
</script> 

Answer 2

從http://css3.bradshawenterprises.com/animating_height/ 而不是使用100％，只是「讓它」通過不限制它獲得自動值。

注：100px的是 「比實際尺寸更大的任何數量的」 剛

function growDiv(id) { 
 
    var ele = document.getElementById(id); 
 
    if (ele.style.maxHeight != '0vh') { 
 
    ele.style.maxHeight = '0vh'; 
 
    } else { 
 
    ele.style.maxHeight = "100vh"; 
 
    } 
 
}

.main { 
 
    font-weight: 700; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
} 
 
.secondary { 
 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    -ms-transition: all .5s ease; 
 
    -o-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
    overflow: hidden; 
 
    padding-left: 20px; 
 
    cursor: pointer; 
 
}

<div class="main" onclick="growDiv('expandable')"> 
 
    Expand 
 
</div> 
 
<div class="secondary" id="expandable" onclick="growDiv('expandable')" style="max-height: 0vh;"> 
 
    number1, 
 
    <br>number2, 
 
    <br>number3, 
 
    <br>number4. 
 
</div>

編輯：改變了一切，以VH（視高度），所以它永遠不會大於100％的屏幕高度，並將適應任何屏幕的最大高度。 也將「style =」max-height：0vh;「切換到元素本身而不是類，所以如果需要，您可以用ele.style取消設置它（否則您需要設置一個新值來覆蓋類。？。

Answer 3

該問題是由切換度量單位引起的，因此從像素到百分比。我可能會做一點不同，但是。

growDiv = function(id) { 
 
    document.getElementById(id).classList.toggle('expanded'); 
 
}

.main { 
 
    font-weight: 700; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
} 
 
.secondary { 
 
    transition: max-height .5s ease; 
 
    overflow: hidden; 
 
    padding-left: 20px; 
 
    max-height: 0; 
 
    cursor: pointer; 
 
} 
 
.secondary.expanded { 
 
    height: 100%; 
 
    max-height: 100px; 
 
}

<div class="main" onclick="growDiv('expandable')"> 
 
    Expand 
 
</div> 
 
<div class="secondary" id="expandable" onclick="growDiv('expandable')"> 
 
    number1, 
 
    <br>number2, 
 
    <br>number3, 
 
    <br>number4. 
 
</div>

你會注意到JS是有點簡單，它更多地依賴於CSS。