Edge和IE11中的CSS轉換無效

Question

我經常發現自己沒有CSS問題，但這讓我摸不着頭腦。

在這個插件http://plnkr.co/i2Fxol中 ，一切都與所有瀏覽器中的預期完全一樣，除了IE10和11以及Edge完全無法將css轉換應用於某些元素，而不是全部。 無論我看多少，我都看不出為什么它會在那些特定的地方失敗。 （這里添加了CSS，但需要在上下文中看到，因為這是一個非常簡單的視圖）

#navigation ul {
  display: block;
  list-style: none;
  overflow: hidden;
  transition: all .2s ease;
}

基本上，當手風琴打開時，它們會打嗝，菜單可以在0.2秒內展開和收縮。 所有其他過渡都有效。

哦，現在有辦法讓我在HTML5中為svg路徑添加閉包只是為了刪除IE和Edge中那些毫無意義的警告。

編輯

手風琴的最初高度是通過以下方式收集的：

...
var initialHeights = document.getElementsByClassName("level-1");
var values = [];
for(var i = 0; initialHeights.length > i; i++){
  values.push(initialHeights[i].offsetHeight);
}
...

然后將它們與使用以下內容安全存儲在數組中的值內聯歸零：

function toZero(){
  for(i = 0; mainSubMenus.length > i; i++){
    mainSubMenus[i].setAttribute("style", "height:0;");
  }
}
toZero();

這允許使用css在零高度和已知值之間轉換。

brainfart

我想也許以下可以治愈病人：

mainSubMenus[i].style.height = 0;

我錯了。

Answer 1

我認為這里的問題是缺乏初始高度。 如果您在元素上循環，並將其高度設置為等於其計算高度樣式的高度，則可以使用折疊樣式將高度覆蓋為0px，從而觸發兩個顯式數字之間的過渡。

 var box = document.querySelector( ".box" ); // Set the box's initial height to its computed height box.style.height = window.getComputedStyle( box ).height; // Hide the box box.classList.add( "collapsed" ); // Click will toggle a "collapsed" class on the box document.addEventListener( "click", e => box.classList.toggle( "collapsed" ) ) 

 .box { width: 100px; overflow: hidden; border: 1px solid #000; transition: all .2s ease; } .collapsed { height: 0!important; } 

 <ul class="box"> <li>Hello</li> <li>World</li> </ul>