Edge 和 IE11 中的 CSS 过渡不起作用

Question

我并不经常发现自己遇到 CSS 问题，但这让我摸不着头脑。

在这个 plunk 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 在零高度和已知值之间转换。

脑残

我认为也许以下方法可以治愈疾病：

mainSubMenus[i].style.height = 0;

我错了。

Answer 1

我认为这里的问题在于缺少初始高度。如果您循环遍历元素，并将它们的高度设置为等于其计算高度样式的高度，那么您可以使用 collapse 样式将高度覆盖为 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>