AngularJS动画完成后运行代码

一尘不染

AngularJS动画完成后运行代码

angularjs

我有一个其可见性由切换的元素ng-show。我还在这个元素上使用CSS动画-来自ng-animate的自动动画-对其条目进行动画处理。

元素将包含图像或视频。

在元素包含视频的情况下，我想播放它，但是在完成动画制作之前，我不想播放视频。

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

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

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

有更好的方法吗？

阅读 164

2020-07-04

共1个答案

一尘不染

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

2020-07-04