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>

IE / Edge是否可以对calc（）CSS规范进行适当的动画设置？

1 个答案: