webkitTransitionEnd запускается до repaint/reflow

Question

Я пытаюсь сделать progressBar whitch меняет свою ширину, когда я делаю запрос ajax, я хочу, чтобы обратный вызов ajax выполнялся только после завершения анимации progressBar, я использую этот код:

CSS:

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

ЯШИ:

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 + '%' 
        } 

но обратный вызов 'endProgressBar' вызывается до ширины в 100% на моем экране

Единственное решение, которое я нашел, это добавить setTimeout в 200 мс, но мне это не нравится.

Что я не понимаю, это getComputedStyle (document.body) .width; верните мне то же значение, что и getComputedStyle (progressBar) .width, но в действительности это не так.

Благодаря

Answer 1

Я решил свою РЬ заменить переход ширины на перевод перехода и вызова offsetWidth на йот элемента после того, как translate3d изменилось.