javascript - 角度网格调整大小和过渡效果

Question

我有一个带有 Angular Grid 的页面，并且我已经对其进行了设置，以便我能够单击一个按钮并将网格窗格的大小从默认的 70% 调整为 100%。我必须依赖调用网格 api 方法“handleWindowResize”方法，以便在拉伸发生后网格列得到正确调整大小/重新格式化。

但是，我想加入一个 CSS 过渡transition:width 2s，这样屏幕上就不会出现这样的问题。然而，handleWindowResize过渡前的运行能够完成，所以我最终得到了一个不完整的网格。在 css 转换完成后，我也无法调用，handleWindowResize因为那时转换只发生在网格的标题部分，然后重新调整大小再次出现，这一切看起来都很丑陋。

我需要的是在handleWindowResize整个过渡过程中调用 ，因为看起来网格随着过渡而延伸，但我无法想出 Javascript 来实现这一点。实际上，过渡和handleWindowResize需要同步运行，然后handleWindowResize将在完成时再次运行，因此它看起来像一个流畅的屏幕拉伸。

http://ui-grid.info/

目前的代码是：

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.
})