I am struggling with a CSS transition that freezes before it is finished because a returning API call adds some elements to the DOM, and this seems to create a conflict. The case is that of a flyout menu that overlays part of the page, and this menu is supposed to close when navigating to certain pages on the site. The opening and closing of this menu is accomplished through the following HTML and CSS (with the "open" class being added by ng-class):
The simplified element looks like this
<div class="flyoutmenu" data-ng-class="{'open':hasEnabledSearch}">
<p>Irrelevant content</p>
</div>
and the following is the relevant CSS for the menu
.flyoutmenu {
height: 0;
z-index: 1001;
transition: all 0.3s ease-out;
}
.flyoutmenu.open {
height: 100%;
}
I have reproduced a similar case in the following JSFiddle: https://jsfiddle.net/tcLqghuo/
Clicking the button here simulates navigating to a page where the menu should close. It starts closing, but before it finishes the transition, some elements are added to the DOM, causing the transition to freeze. When the DOM manipulation is finished, the period for the transition is also over, and the menu immediately switches to the closed state.
Is there any way to prevent the transition from freezing mid-animation without delaying the entire transition until the API call returns and the subsequent DOM manipulation, or vice versa? I know the transitions run separately from the JS thread, but is it impossible for it to happen in parallel with other DOM manipulation?
