25

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

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

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

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

文档引用 a doneCallback，但我看不到指定它的方法...

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

有没有更好的方法？

4

3 回答 3

26

正如@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 看到一个这样的例子。

于 2014-01-04T22:01:53.670 回答
26

@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：代码示例

于 2014-10-30T14:53:01.487 回答
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>

普朗克

于 2017-01-16T07:32:06.457 回答