如何计算 IE11 中 CSS 网格列的宽度以进行动画处理？

Question

'Slide' 按钮切换 left-margin。需要找到一种方法来为 left-margin 设置动画，但是在任何 calced 元素上使用 transition 似乎在 IE11 中被窃听 - 仍然。

JS Bin 中的示例 https://jsbin.com/qirozodete/1/edit?html,css,output 及以下。

这是我正在处理的项目的一个非常简单的模型。尝试创建一个在每个分辨率下滑动并缩小 1 grid 列的元素。目前正在使用 calc 来计算网格列的大小，这适用于 FF/Chrome/Safari。只是不是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

我测试了你的代码并重现了这个问题。我认为我们只能使用 JavaScript 进行更改作为 IE 中的解决方法。我们可以计算 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>

如何计算 IE11 中 CSS 网格列的宽度以进行动画处理？

How to calculate the width of a CSS Grid column in IE11 for animation?

css

internet-explorer-11

css-grid