Question

我正在努力解决在完成之前冻结的CSS转换，因为返回的API调用会向DOM添加一些元素，这似乎会产生冲突。这是一个覆盖部分页面的弹出菜单，当导航到网站上的某些页面时，该菜单应该关闭。这个菜单的打开和关闭是通过以下HTML和CSS完成的（“open”类由ng-class添加）：

简化元素看起来像这样

<div class="flyoutmenu" data-ng-class="{'open':hasEnabledSearch}">
  <p>Irrelevant content</p>
</div>

以下是菜单的相关CSS

.flyoutmenu {
  height: 0;
  z-index: 1001;
  transition: all 0.3s ease-out;
}

.flyoutmenu.open {
  height: 100%;
}

我在以下JSFiddle中复制了类似的案例：https://jsfiddle.net/tcLqghuo/

单击此处的按钮可模拟导航到菜单应关闭的页面。它开始关闭，但在完成转换之前，一些元素被添加到DOM，导致转换冻结。当DOM操作完成时，转换的周期也结束，菜单立即切换到关闭状态。

在API调用返回和后续DOM操作之前，有没有办法阻止转换从冻结动画中期而不延迟整个转换，反之亦然？我知道转换与JS线程分开运行，但是它不可能与其他DOM操作并行发生吗？