IE/Edge 是否适当地为 calc() CSS 规范设置动画？

Question

演示链接： https://codepen.io/jodriscoll/pen/wRpQOw

我正在研究一种“侧向盲”动画行为，当用户将鼠标悬停在一个对象（锚点）上时，它会扩展对象（锚点）的宽度并创建一种显示更多对象包含的感知内（想想各种剪贴蒙版）。

最初，视频/图像对象的样式是为了防止它使用“剪贴蒙版”（锚点包裹视频/图像）按 1:1 移动。意思是，当用户将鼠标悬停在锚点上时，它已经偏移到它应该在的位置。

图像和视频最初的样式都是为了填充整个锚点和排水沟间隙；这有助于在制作动画时创建我们只是显示更多照片的感觉，而不是实际调整它的大小并使其在屏幕上移动（抱歉，这可能会造成混淆......）：

left: -24px;              // the width of each gutter gap
width: calc(100% + 48px); // fill the parent + fill the gutter gaps

当用户将鼠标悬停在锚点上时，子元素将其 CSS 规范更改为：

left: 0;     // stay flush with the anchor object
width: 100%; // fill the parent, which now includes the gutter gap(s)

在 Chrome / Safari / Firefox 上查看动画行为时，一切似乎都正常工作：

• http://svg-gmmb-cis.pantheonsite.io/wp-content/uploads/2019/01/debugging_animations.mp4

很遗憾，IE11/Edge 出现了一点小问题：

• http://svg-gmmb-cis.pantheonsite.io/wp-content/uploads/2019/01/IE_animation_bug.mp4

问题和有助于获得答案的有用见解：

• 查看动画故障后，IE11/Edge 是否存在使用 calc() 动画 CSS 措施的问题？

• 我是否需要创建一个带有关键帧的 CSS 动画来解决 IE11/Edge 中的这个问题？

• 我是不是搞错了，应该为不同的属性设置动画？

Answer 1

您可以通过边距轻松做到这一点，并避免使用calc。

这是一个简化的例子：

.container {
  border:1px solid;
  padding: 0 24px;
  height:100px;
}
.box {
  height:100%;
  background:red;
  transition:.5s all;
}
.box:hover {
  margin:0 -24px;
}

<div class="container">
  <div class="box"></div>
</div>

或者像这样：

.container {
  border:1px solid;
  margin: 0 24px;
  height:100px;
}
.box {
  height:100%;
  background:red;
  transition:.5s all;
}
.box:hover {
  margin:0 -24px;
}

<div class="container">
  <div class="box"></div>
</div>