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

CSS transitions in Edge and IE11 not working

本文关键字：转换 不起作用 CSS 中的 IE11 Edge      更新时间：2023-09-26

我不经常发现自己有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在零高度和已知值之间转换。

脑放屁

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

mainSubMenus[i].style.height = 0;

我错了。

我认为这里的问题是缺少初始高度。如果在图元上循环，并将其高度设置为其计算高度样式的高度，则可以使用折叠样式将高度覆盖为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>

相关文章：