如何计算 IE11 中 CSS Grid 列的宽度以进行动画处理？答案

【问题标题】：How to calculate the width of a CSS Grid column in IE11 for animation?如何计算 IE11 中 CSS Grid 列的宽度以进行动画处理？
【发布时间】：2020-05-19 21:27:56
【问题描述】：

“滑动”按钮切换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>

【问题讨论】：

"似乎在 IE11 中存在错误 - 仍然" — 那个“仍然”将永远存在，永远不会被修复。 IE11 已经死了，它只会获得安全更新，没有错误修复，甚至只有在支持它附带的最后一个操作系统时才会获得安全更新。

标签： css internet-explorer-11 css-grid

【解决方案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>

【讨论】：