求助帖:transition和渲染问题，来个大佬解惑

如果感到困惑就扣扣脑袋，就会秃的更快

0到500的动画效果

button.addEventListener('click',()=>{
    box.style.transform = 'translateX(1000px)';
    box.style.transition = 'transform 1s ease-in-out';
    // 使用getComputedStyle只需访问其中一个属性，这样使浏览器更早地执行样式计算
    // 这会上浏览器记下你在此之前设置的所有内容，所以就像哦，好吧
    // tranform,translateX(500px)这是该元素所做的事情
    // 但是这种做法需要小心，因为你最终可能会让浏览器在一帧图的时间内做不少多余的工作
    getComputedStyle(box).transform;
    box.style.transform = 'translateX(500px)';
});

1000到500的动画效果

btn6.addEventListener('click', () => {
    div6.style.transform = 'translateX(1000px)';
    getComputedStyle(div6).transform
    div6.style.transition = 'transform 1s ease-in-out';
    div6.style.transform = 'translateX(500px)';
});

那么问题来了，为啥transition放在getComputedStyle前面和后面，执行的过渡动画不一样？有没懂底层事件循环和页面渲染的大哥解惑一下，谢谢🙏

回来填坑了： 在 CSS 过渡期间，getComputedStyle返回 Firefox 中的原始属性值，但返回 WebKit 中的最终属性值。 不知道是不是这个原因，如果有懂哥欢迎继续留言。