【问题标题】:Chrome 75, break transform-origin animationChrome 75,中断变换原点动画
【发布时间】:2019-11-21 20:12:37
【问题描述】:

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

例如:

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

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

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

    stat1.innerText = div.style.transform;
    stat2.innerText = div.style.transformOrigin;
  });

  setTimeout(loop, 2000, !x);
})();

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

  const xx = x + (d ? 1 : -1);
  setTimeout(loop2, 100, xx, xx > 0 && xx < 100 ? d : !d);
})();
#div {
  transform: scale(1);
  transition: transform 4s ease 0s;
}

/* not important */

#div {
  background: green;
  opacity: 0.5;
}

#div2 {
  background: grey;
  color: white;
  text-align: center;
}

#div, #div2 {
  position: absolute;
  top: 80px;
  left: 80px;
  
  width: 80px;
  height: 80px;
}
<div id="div2">
  <span id="stat1"></span><br/>
  <span id="stat2"></span><br/>
  <span id="stat3"></span>
</div>
<div id="div"></div>

【问题讨论】:

  • 哦,我不知道为什么,但我现在不能重现它,昨天我写这个代码的时候被重现了。好的,稍后再查看
  • 现在我找到了如何重现它,你应该以全屏模式打开sn-p

标签: javascript css google-chrome css-animations


【解决方案1】:

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

【讨论】:

    猜你喜欢
    • 2018-04-19
    • 1970-01-01
    • 2017-09-24
    • 2018-05-03
    • 2020-01-05
    • 2018-01-19
    • 2014-10-04
    • 2018-09-29
    • 2021-12-22
    相关资源
    最近更新 更多