这是一个演示:https://jsfiddle.net/simonmysun/xowyzvus/15/
(代码将被附加)
在我的浏览器中,第三个过渡并不流畅。它最后一次闪向目标。似乎它首先在过渡期间忽略了 transform-origin 但在最后应用了它。为什么会这样?
附言浏览器可能会产生不同的结果。在我的 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);
最佳答案
永远不要将
all
用作transition
属性,因为它会遍历所有可设置动画的属性。请改用transform
。如果您真的想使用 javascript 制作动画,您需要在每次屏幕刷新时更新的内容。
<requestAnimationFrame
是您所需要的,因为setInterval
和setTimeout
可以在屏幕重绘期间激活,这会使动画“跳动”。
关于javascript - 为什么 CSS transform-origin 和 transform 不能一起过渡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58860536/