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

Question

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

我正在研究一种“像侧向盲人一样”的动画行为，当用户将鼠标悬停在一个对象( anchor )上时，它会扩大对象( anchor )的宽度，并产生一种显示更多对象包含的感觉在(想想各种剪贴蒙版)。

最初，视频/图像对象的样式设置为防止它与“剪切蒙版”( anchor 包裹视频/图像)1:1 移动。这意味着，当用户将鼠标悬停在 anchor 上时，它已经偏移到应有的位置。

图像和视频的初始样式都被设置为填充整个 anchor 和间距间隙；这有助于在动画时创建我们只是显示更多照片的感觉，而不是实际调整它的大小并使其在屏幕上移动(抱歉，这可能会造成混淆......):

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

当用户将鼠标悬停在 anchor 上时，子元素会将其 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

您可以使用 margin 轻松做到这一点，避免使用 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>