CSS Edge 和 IE11 中的转换不工作

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>

CSS Edge 和 IE11 中的转换不工作

CSS transitions in Edge and IE11 not working

javascript

css

internet-explorer

microsoft-edge

编辑

脑残