Question

当我发出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'

我找到的唯一解决方案是添加200ms的setTimeout但我不喜欢这个解决方案。

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

由于

Answer 1

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

在重绘/重排之前触发webkitTransitionEnd

1 个答案: