时间戳

首页 > 解决方案 > 如何计算 IE11 中 CSS Grid 列的宽度以进行动画处理？

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

问题描述

“滑动”按钮切换left-margin. 需要找到一种方法来制作动画，left-margin但是transition在任何calced 元素上使用 a 似乎在 IE11 中仍然存在问题。

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

这是我正在从事的项目的一个非常简单的模型。尝试创建一个grid在每个分辨率下滑动和缩小 1 列的元素。目前使用 acalc来计算网格列的大小，适用于 FF/Chrome/Safari。只是不是IE。

不要认为我可以使用transform: translate任何一个，因为元素不会缩小，而且calcs所需的比仅仅 stacking 更复杂一些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>

标签： cssinternet-explorer-11css-grid

解决方案

我测试了您的代码并重现了该问题。我认为我们只能使用 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>

推荐阅读