javascript - 转换期间的 CSS 转换更改导致当前状态丢失并跳转到开头(Chrome 错误)

Question

在 Google Chrome 73(正式版)(64 位)中测试。

还在最新的稳定版 Mozilla、Opera 和 Safari 中进行了测试。

看起来这只是 Chrome 的一个错误。希望在 Chrome 团队修复错误之前有解决方法。

演示

我创建了 Codepen显示问题。

const div = document.querySelector('div');

const cssTransition = 2500;
const states = [
  ['INITIAL', 'translate(0)', cssTransition / 2],
  ['A', 'translate(0, 100px)', cssTransition + 500],
  ['B', 'translate(100px, 100px)', cssTransition / 2],
];

let cursor = 0;

const animate = () => {
  cursor = (cursor + 1) % states.length;
  const [name, value, delay] = states[cursor];
  setTimeout(() => {
    div.innerText = name;
    div.style.transform = value;
    animate();
  }, delay);
};

animate();

div {
  width: 100px;
  height: 100px;
  background: brown;
  color: white;
  font-size: 25px;
  font-family: sans-serif;
  text-align: center;
  line-height: 100px;
  margin: 50px auto;
  transition: 2.5s ease;
}

<div>INITIAL</div>

任务

通过 JavaScript 动画元素以使用 CSS3 转换属性更改其在屏幕上的位置。

条件:

1. 元素有固定的过渡时间(在 CSS 文件中定义)。
2. 在动画的任何时候，JavaScript 都可能会设置元素的新位置，即在现有动画完成之前会发生变化。
3. 事先不知道元素的新位置 => 即 CSS 类列表不是此处的选项。

问题是 - 过渡不平滑，因为新动画从前一个动画的初始位置跳转，而不是从当前位置平滑过渡。

实际行为

当元素的 CSS transform 属性在过渡期间(即在当前动画完成之前)发生变化时，下一个动画将从上一个动画的初始状态开始。

• 第 1-5 步是第一个动画(INITIAL 和 A 状态之间的转换)。
• 第 6-10 步是第二个动画(INITIAL 和 B 状态之间的转换)。
• 第 3 步是第一个动画被打断的地方，因为最终变换属性发生了变化，即第二个动画从这里开始。

如您所见，动画跳转到初始状态，这是错误的(不需要的)。第 6 步的位置应靠近第 3 步。

预期行为

CSS 变换属性更改应将内部动画计时器重置为 0(因此，新动画将按照过渡属性中的定义持续)但将当前变换状态保持为下一个动画的初始状态。

• 第 1-5 步是第一个动画(INITIAL 和 A 状态之间的转换)。
• 第 6-10 步是第二个动画(中间“INITIAL 到 A”和 B 状态之间的转换)。
• 第 3 步是第一个动画被打断的地方，因为最终变换属性发生了变化，即第二个动画从这里开始。

如您所见，新动画从预期的位置开始 - 从第 3 步开始并将元素很好地移动到新位置。

感谢阅读。期待您的帮助。

Answer 1

我不确定为什么会发生这种情况，但解决方案是在更改为所需的新值之前手动将转换属性(此处为 transform)设置为其当前计算值。

div.style.transform = getComputedStyle(div).transform;
// Cause a reflow to force the browser to apply the set transform
div.innerWidth;
div.style.transform = value;

这是一个fork of your pen包括修复。

getComputedStyle 是 widely supported所以你不需要担心 polyfill 除非你想支持 IE < 9