Chrome 75,打破了变换原始动画

时间:2019-07-12 05:12:58

标签: javascript css google-chrome css-animations

我在chrome 75版本中发现了可能的问题(或者可能是feature =)。 变换动画期间变换原点的变化不会影响动画。 我附加了snipet,其中包含两个循环,一个循环更改了变换,另一个循环更改了原点。

例如:enter image description here

在75版本的更新日志中,我发现此提交可能与以下问题有关:commit

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

// change transform
function loop(x = true) {
  requestAnimationFrame(() => {
    div.style.transform = x ? 'scale(2)' : 'scale(1)';
  });

  setTimeout(() => loop(!x), 5000);
}

// change transform origin
function loop2(x = 0, d = true) {
  div.style.transformOrigin = `${x}% ${x}%`;

  const xx = x + (d ? 1 : -1);
  setTimeout(loop2, 100, xx, xx > 0 && xx < 100 ? d : !d);
}

loop();
loop2();
#div {
  background: green;
  opacity: 0.5;
  
  transform: scale(1);
  transition: transform 3s ease 0s;
}

#div2 {
  background: grey;
}

#div, #div2 {
  position: absolute;
  top: 100px;
  left: 100px;
  
  width: 100px;
  height: 100px;
}
<div id="div2"></div>
<div id="div"></div>

1 个答案:

答案 0 :(得分:0)

我们最近发现这个问题消失了。至少从 90.0.4430.85 开始