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

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

您願意使用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 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。