为什么 CSS 的 transform-origin 和 transform 不能一起过渡？

Question

这是一个演示：https://jsfiddle.net/simonmysun/xowyzvus/15/

（将附加代码）

在我的浏览器中，第三次过渡并不顺利。它在最后一次闪烁到目标。似乎它首先在转换期间忽略了变换原点，但在最后应用了它。为什么会这样？

附：浏览器可能会产生不同的结果。在我的 Windows 10 设备上，Chrome 75 在过渡结束时闪烁，在 Firefox 70 中它在颤抖，而在 Edge 41 中没有任何反应。

HTML：

<h2>Transited: CSS transform</h2>
<div class="container"><div id="box1"></div></div>
<h2>Transited: CSS transform-origin</h2>
<div class="container"><div id="box2"></div></div>
<h2>Transited: CSS transform and transform-origin</h2>
<div class="container"><div id="box3"></div></div>

CSS：

.container {
  width: 300px;
  height: 300px;
  overflow: hidden;
}
#box1, #box2, #box3 {
  width: 300px;
  height: 300px;
  background-color: white;
  background-size: 30px 30px;
  background-position: -8px -8px;
  background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, 0.5) 50%, rgba(200, 0, 0, 0.5)), linear-gradient(90deg, transparent 50%, rgba(200, 0, 0, 0.5) 50%, rgba(200, 0, 0, 0.5));
  transform: translate(0px, 0px) scale(1.5);
  transform-origin: 0px 0px;
}
#box1 {
  transition: transform 1000ms, transform-origin 1000ms;
}
#box2 {
  transition: transform 1000ms, transform-origin 1000ms;
}
#box3 {
  transition: transform 1000ms, transform-origin 1000ms;
}

Javascript：

var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
var transform = {
    x: 0,
  y: 0,
  scale: 1.5,
  ox: 0,
  oy: 0
};
box1.style.transformOrigin = `${transform.ox}px ${transform.oy}px`;
box1.style.transform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`;
box2.style.transformOrigin = `${transform.ox}px ${transform.oy}px`;
box2.style.transform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`;
box3.style.transformOrigin = `${transform.ox}px ${transform.oy}px`;
box3.style.transform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`;
setInterval((function(){
    var step = 0;
    var steps = [{
    x: -100,
    y: -100,
    scale: 2,
    ox: -100,
    oy: -100,
  }, {
    x: -200,
    y: -100,
    scale: 2,
    ox: -200,
    oy: -100,
  }, {
    x: -200,
    y: -200,
    scale: 2,
    ox: -200,
    oy: -200,
  }, {
    x: -100,
    y: -200,
    scale: 2,
    ox: -100,
    oy: -200,
  }];
    return function() {
    transform = steps[step];
    step += 1;
    step %= 4;
    // box1.style.transformOrigin = `${transform.ox}px ${transform.oy}px`;
        box1.style.transform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`;
    box2.style.transformOrigin = `${transform.ox}px ${transform.oy}px`;
        // box2.style.transform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`;
    box3.style.transformOrigin = `${transform.ox}px ${transform.oy}px`;
        box3.style.transform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`;
  }
})(), 1500);

Answer 1

1. 您永远不应该将all 用作transition 属性，因为它会循环遍历所有动画属性。请改用transform。

2. 如果您真的想使用 javascript 制作动画，您需要在每次屏幕刷新时更新的内容。 requestAnimationFrame 是您所需要的，因为 setInterval 和 setTimeout 可以在屏幕重绘期间激活，从而使动画“跳跃”。