Question

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

元素将包含图像或视频。

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

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

docs引用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类，因此有关动画from the docs about ngShow的点仍然有效，您需要将display: block !important添加到CSS。

你可以see an example of this in action at this 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

@ 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

AngularJS动画完成后运行代码

3 个答案: