I have a page with an Angular Grid and I have it set up so that I am able to click a button and resize the grid's pane from the default 70% to 100%. I do have to rely on calling the grid api method "handleWindowResize" method so that the grid columns get properly resized/reformatted after the stretch happens.
However, I would like to throw in a css transition transition:width 2s so that's it's not such blip on the screen. However the handleWindowResize runs before the transition is able to complete so I end up with an incomplete grid. I also would not be able to call the handleWindowResize after the css transition completes because then the transition only happens to the header part of the grid and then the resize blips again and it all looks ugly.
What I need is for the handleWindowResize to be called throughout the transition's process as so it looks like the grid is stretching along with the transition but I am unable to come up with the Javascript to accomplish this. Effectively the the transition and the handleWindowResize needs to be running in sync and then the handleWindowResize would be run once more on completion so it looks like a fluid screen stretch.
Currently the code is:
document.querySelector(".some-btn").on("click", function(){
document.querySelect(".the-grid").setAttribute("style", "width: 100%; transition: 2s");
$scope.gridApi.core.handleWindowResize(); // need this to run many times as the grid is transitioning in size.
})
