AngularJS动画完成后运行代码

Question

我有一个可见性被切换的元素ng-show.我也在使用CSS动画 - 来自ng-animate的自动动画 - 在这个元素上为它的入口设置动画.

元素将包含图像或视频.

在元素包含视频的情况下,我想播放它,但我不想播放视频,直到完成动画制作.

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

该文档引用doneCallback,但我看不到的方式来指定它...

一种解决方法(？)我想到的是$watch荷兰国际集团element.hasClass("ng-hide-add-active"),并等待它用火(true, false),这意味着它只是被删除..

有更好的方法吗？

Answer 1

正如@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类,所以关于ngShow的文档动画的点仍然有效,你需要添加display: block !important到CSS.

您可以在此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:代码示例