更新范围的一半

Question

编辑：我放在一起的jsfiddle：http://jsfiddle.net/U3pVM/18137/

我想黑上去，然后将绿色滑过......我不知道该怎么实现这个...阅读更多的信息：

---

边注：该代码是打字稿（重：（）=> {}）

以下上下文显示网页THA t有一个覆盖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 
}); 

什么是应该做的是：

• 当调整大小是真实的，它消除了一个CSS类动画的东西。
• 然后，它运行MoveToPage方法，使位置等于一个新的数字..通常它会动画到新的位置，但在这种情况下，我不希望它（因此调整大小属性）。

我们可以看到，在我的html以上表示：

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

接着，该流程异步适用范围（因为如果我用一个简单的应用，它抛出一个错误），并作为回调到此方法，然后从页面的顶部拉动叠加层......然后将调整大小设置回false以重新应用动画。

问题：

我需要滑落覆盖后，下面的内容定位。实际发生的事情是，它将覆盖层从顶部滑出，而底部页面则动画到我告诉它去的地方。我如何解决这个CSS动画消化问题...

也许一个更简单的问题是，为什么当Resize设置为false并且主动地告诉它更新范围时，该类不会被删除？

解释我的背景：

Answer 1

可以明显使用的setTimeout来处理$范围$适用问题：

http://jsfiddle.net/U3pVM/18138/

$scope.Resizing = true; 
$scope.MoveToPage(col, row); 
setTimeout(function() { 
    $scope.FirstPageTop = -$scope.PageMap.WindowInfo.Height; 
    $scope.Resizing = false; 
    $scope.$apply() // This is important 
}, 1);