javascript - webkitTransitionEnd 在重绘/回流之前被触发

Question

当我发出 ajax 请求时，我试图让一个 progressBar 改变它的宽度，我希望 ajax 回调仅在 progressBar 的动画结束后执行，我使用此代码:

CSS:

#progressBar{
    position: fixed;
    top: 0;
    left: 0;
    background: black;
    height: 3px;
    width: 0;
    transition: width 0.1s linear;
}   

js:

 var endProgressBar = function(){
                var bodyWidth = getComputedStyle(document.body).width;
                var scrolbarWidth = getComputedStyle(progressBar).width;
                console.log(scrolbarWidth  == bodyWidth )   //true but in reality not       
                param.success(req.responseText)
            }

...
        if(lastAffectWidth > 99){
                        progressBar.addEventListener("webkitTransitionEnd", endProgressBar,false);
                        progressBar.addEventListener("Transitionend", endProgressBar,false);
                        progressBar.addEventListener("otransitionend", endProgressBar,false);
                        progressBar.style.width = 100 + '%'
                    }

但是在屏幕上的宽度为 100% 之前调用了回调“endProgressBar”

我发现的唯一解决方案是添加 200 毫秒的 setTimeout，但我不喜欢这个解决方案。

我不明白的是 getComputedStyle(document.body).width;返回与 getComputedStyle(progressBar).width 相同的值，但实际情况并非如此。

谢谢

Answer 1

我通过将宽度转换替换为转换转换并在 translate3d 更改后在 dom 元素上调用 offsetWidth 来解决我的 pb。