在 AngularJS 动画完成后运行代码

Question

我有一个元素的可见性由ng-show 切换。我还在此元素上使用 CSS 动画（ng-animate 中的自动动画）来为其条目设置动画。

该元素将包含图像或视频。

如果元素包含视频，我想播放它，但我不想播放视频，直到它完成动画。

因此，我想知道是否有一种简单的方法可以将回调绑定到 AngularJS 中 CSS 动画的末尾？

docs 引用了 doneCallback，但我看不到指定它的方法...

我想到的一种解决方法（？）是$watching element.hasClass("ng-hide-add-active") 并等待它与(true, false) 一起触发，这意味着它刚刚被删除..

有更好的方法吗？

Answer 1

@michal-charemza 解决方案效果很好，但是该指令创建了一个隔离范围，因此在某些情况下它不能直接替代默认的 ng-show 指令。

我对其进行了一些修改，使其不会创建任何新的范围，并且可以与 ng-show 指令互换使用。

app.directive('myShow', function($animate) {
  return {
    link: function(scope, element, attrs) {
      scope.$watch(attrs['myShow'], function(show, oldShow) {
        if (show) {
          $animate.removeClass(element, 'ng-hide').then(function(){
            scope.$apply(attrs['myAfterShow']);
          });
        } else {
          $animate.addClass(element, 'ng-hide').then(function(){
            scope.$apply(attrs['myAfterHide']);
          });
        }
      });
    }
  }
})

用法：

<div my-show="show" my-after-hide="afterHide()" my-after-show="afterShow()">...</div>

Plunker

Answer 2

@michael-charemza 的回答对我很有帮助。如果您使用的是 Angular 1.3，他们会稍微改变一下承诺。我在这个问题上卡住了一点，但这是让它起作用的变化：

if (show) {
  $animate.removeClass(element, 'ng-hide').then(scope.afterShow);
}
if (!show) {
  $animate.addClass(element, 'ng-hide').then(scope.afterHide);
}

Plunker：Code Example

Answer 3

正如@zeroflagL 所建议的，替换ngShow 的自定义指令可能是要走的路。您可以使用& 将回调传递到指令中，该指令可以在动画完成后调用。为了保持一致性，动画是通过添加和删除 ng-hide 类来完成的，这与通常的 ngShow 指令使用的方法相同：

app.directive('myShow', function($animate) {
  return {
    scope: {
      'myShow': '=',
      'afterShow': '&',
      'afterHide': '&'
    },
    link: function(scope, element) {
      scope.$watch('myShow', function(show, oldShow) {
        if (show) {
          $animate.removeClass(element, 'ng-hide', scope.afterShow);
        }
        if (!show) {
          $animate.addClass(element, 'ng-hide', scope.afterHide);
        }
      });
    }
  }
})

监听作用域变量show的示例如下：

<div my-show="show" after-hide="afterHide()" after-show="afterShow()">...</div>

因为这是添加/删除 ng-hide 类，所以关于动画from the docs about ngShow 的点仍然有效，您需要在 CSS 中添加 display: block !important。

你可以see an example of this in action at this Plunker。