Chrome 75,打破了变换原点的动画 [英] Chrome 75, break transform-origin animation
本文介绍了Chrome 75,打破了变换原点的动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在chrome 75版本中发现了可能的问题(或者可能是feature =).变换动画期间变换原点的变化不会影响动画.我附加了snipet,其中包含两个循环,一个循环更改了变换,另一个循环更改了原点.
I found possible issue(or may be it is feature =)) in chrome 75 version. Changes of transform origin during of transform animation doesn't affect on animation. I attached snipet which contains two loops, one changed transform, another changed transform origin.
例如:
在75版本的更新日志中,我发现此提交可能与以下问题有关:提交
In changelog for 75 version I found this commit which probably related to this issue: 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>
推荐答案
我们最近发现此问题已消失.至少从90.0.4430.85
We recently found that this problem was gone. At least since 90.0.4430.85
这篇关于Chrome 75,打破了变换原点的动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文