webkitTransitionEnd 在重绘/重排之前触发答案

【问题标题】：webkitTransitionEnd is triggered before repaint/reflowwebkitTransitionEnd 在重绘/重排之前触发
【发布时间】：2016-12-23 23:09:29
【问题描述】：

我正在尝试在发出 ajax 请求时更改其宽度的 progressBar，我希望仅在 progressBar 的动画结束后执行 ajax 回调，我使用此代码：

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 相同的值，但实际上并非如此。

谢谢

【问题讨论】：

标签： javascript css callback transition repaint

【解决方案1】：

我解决了我的 pb 问题，方法是用 translate 转换替换宽度转换，并在 translate3d 更改后在 dom 元素上调用 offsetWidth。

【讨论】：