在IE11中如何计算CSS网格列的宽度来制作动画？

Question

幻灯片 "按钮可以切换一个 left-margin. 需要找到一种方法来动画 left-margin 然而使用 transition 在任何 calced元素在IE11中似乎有bug--还是。

JS仓中的例子https:/jsbin.comqirozodete1edit?html,css,输出和下面。

这是我正在做的项目的一个非常简单的模拟。试图创建一个可以滑动& 缩小1的元素。grid 在每个分辨率下的列。目前使用的是 calc 以计算出网格列的大小，这在FFChromeSafari上有效。只是在IE上不行。

我不认为我可以使用 transform: translate 因为元素不会收缩，而且也不会有任何变化。calcs 所需要的比单纯的堆叠更复杂一些。translates.

任何想法都将被感激。

document.getElementById('slide-btn').addEventListener('click', function() { 
  document.getElementById('grid').classList.toggle('slide'); 
})

button {
  background: white;
  border: 1px solid black;
  padding: 5px 10px;
}

#grid {
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
}

#grid-item-1 {
  background: teal;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  height: 150px;
  transition: margin-left 500ms ease-in;
}

#grid.slide #grid-item-1 {
  margin-left: calc(100vw / 4);
}

<button id="slide-btn">Slide</button>
<div id="grid">
    <div id="grid-item-1"></div>
</div>

Answer 1

我测试了你的代码并重现了这个问题。我认为在IE中我们只能使用JavaScript来进行修改，作为一种变通方法。我们可以计算出 clientWidth 并查询 marginLeft 值。

示例代码：

document.getElementById('slide-btn').addEventListener('click', function() {
  var ml = document.getElementById("grid-item-1").style.marginLeft;
  var vw = (document.documentElement.clientWidth) / 4;
  if (ml == "") {
    document.getElementById("grid-item-1").style.marginLeft = vw + "px";
  } else {
    document.getElementById("grid-item-1").style.marginLeft = "";
  }
})

button {
  background: white;
  border: 1px solid black;
  padding: 5px 10px;
}

#grid {
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  display: grid;
  grid-template-columns: repeat( 4, 1fr);
}

#grid-item-1 {
  background: teal;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: span 2;
  height: 150px;
  transition: margin-left 500ms ease-in;
}

<button id="slide-btn">Slide</button>
<div id="grid">
  <div id="grid-item-1"></div>
</div>