在Google Chrome 73(正式版)(64位)中进行了测试。
还在最新的稳定版Mozilla,Opera和Safari中进行了测试。
好像只是Chrome的错误。希望在Chrome小组修复该错误之前有一种解决方法。
我创建了Codepen来显示问题。
const div = document.querySelector('div');
const cssTransition = 2500;
const states = [
['INITIAL', 'translate(0)', cssTransition / 2],
['A', 'translate(0, 100px)', cssTransition + 500],
['B', 'translate(100px, 100px)', cssTransition / 2],
];
let cursor = 0;
const animate = () => {
cursor = (cursor + 1) % states.length;
const [name, value, delay] = states[cursor];
setTimeout(() => {
div.innerText = name;
div.style.transform = value;
animate();
}, delay);
};
animate();
div {
width: 100px;
height: 100px;
background: brown;
color: white;
font-size: 25px;
font-family: sans-serif;
text-align: center;
line-height: 100px;
margin: 50px auto;
transition: 2.5s ease;
}
<div>INITIAL</div>
通过JavaScript对元素进行动画处理,以使用CSS3转换属性更改其在屏幕上的位置。
条件:
问题是-过渡不平滑,因为新动画从上一个动画的初始位置跳转,而不是从当前位置平滑过渡。
当元素的CSS变换属性在过渡过程中(即当前动画完成之前)更改时,下一个动画将从上一个动画的初始状态开始。
如您所见,动画跳转到错误的INITIAL状态(不需要)。步骤6的位置应靠近步骤3。
更改CSS变换属性应将内部动画计时器重置为0(因此,新动画将按照过渡属性中的定义持续运行),但将当前变换状态保留为下一个动画的初始状态。
如您所见,新动画将从所需的位置精确开始-从第3步开始,将元素很好地移动到新位置。
感谢您的阅读。期待您的帮助。
答案 0 :(得分:0)
我不确定为什么会发生这种情况,但是解决方案是在将过渡属性(此处为transform
更改为新的所需属性之前,将其手动设置为当前计算的值。
div.style.transform = getComputedStyle(div).transform;
// Cause a reflow to force the browser to apply the set transform
div.innerWidth;
div.style.transform = value;
这是一个fork of your pen,包括修复程序。
getComputedStyle
是widely supported,因此除非您想支持IE <9