My goal is to create a progressBar that changes its width when an ajax request is made. I want the ajax callback to only execute after the animation of the progressBar is complete. Here is the code I am using:
CSS:
#progressBar{
position: fixed;
top: 0;
left: 0;
background: black;
height: 3px;
width: 0;
transition: width 0.1s linear;
}
JavaScript:
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 + '%'
}
However, the 'endProgressBar' callback is being triggered before the width reaches 100% on my screen.
The only solution I have found is to add a setTimeout of 200ms, which I do not prefer.
I'm confused because while getComputedStyle(document.body).width; returns the same value as getComputedStyle(progressBar).width, it doesn't match in reality.
Thank you!