javascript - Edge 和 IE11 中的 CSS 转换不起作用

Question

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

在这个 SCSS 中http://plnkr.co/i2Fxol ，在所有浏览器中，一切都完全按照预期工作，除了 IE10 和 11 以及 Edge 完全无法将 css 转换应用于某些元素，而不是全部。无论我怎么看它，我都看不出为什么它在那些特定的地方失败了。 (此处添加了 CSS，但需要在上下文中查看，因为这是一个非常简单的 View )

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

本质上，当 Accordion 打开并且菜单可在规定的 0.2 秒内展开和收缩时，它们会打嗝。所有其他转换都有效。

哦，现在我可以在 HTML5 中向 svg 路径添加闭包，只是为了删除 IE 和 Edge 中那些完全毫无意义的警告。

编辑

Accordion 的初始高度是在加载时收集的:

...
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>