在范围方法的一半更新范围

Question

编辑：我已经整理了一个JSFiddle：http://jsfiddle.net/U3pVM/18137/

我希望黑色上升，然后绿色滑过...我不知道如何实现这一点...继续阅读以获取更多信息：

旁注：代码在Typescript中（re：（）=＆gt; {}）

以下上下文显示了一个网页，它有一个重叠的div，后面有几个div。它还表示通过css类发生的动画类型。

我有以下代码（参见图表参考）：

$scope.Resizing = true; // This prevents animations from happening (as a css class is linked up to it (see below))
$scope.MoveToPage( col, row ); // 2
$scope.$applyAsync(() => { // Update the view to remove the class and then start sliding up the overlay div
    $scope.FirstPageTop = -$scope.PageMap.WindowInfo.Height; // 3
    $scope.Resizing = false; // Re-enable animations // Finish
});

它应该做的是：

• 当Resizing为true时，它会移除一个动画内容的css类。
• 然后运行MoveToPage方法，使位置等于一个新数字..通常它会动画到新位置，但在这种情况下我不想要它（因此调整大小属性）。

我们可以看到上面用html表达的内容：

<div class="column-wrap" 
            ng-class="{ 'column-wrap-animation' : !Resizing }" 
            ng-style="{ 'width': PageMap.ContainerWidth + 'px',
                        'left': PageMap.ColumnWrap.Left + 'px'}">

然后，该过程异步应用范围（因为如果我使用一个简单的apply，它会抛出一个错误）并且作为这个方法的回调，我正在从页面顶部拉出一个覆盖...然后将Resizing设置为false以重新应用动画。

问题：

我需要在将内容放在其下方之后滑下叠加层。实际发生的是，它将叠加层从顶部滑出，而页面底部则动画到我告诉它去的地方。我如何解决这个css动画消化问题...

也许一个更简单的问题是，为什么在Resizing设置为false并且我告诉它更新范围时，可能不会删除该类？

解释我的背景：