在 AngularJS 动画完成后运行代码 [英] Running code after an AngularJS animation has completed

问题描述

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

I have an element whose visibility is toggled by ng-show. I'm also using CSS animations - the automatic ones from ng-animate - on this element to animate its entry.

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

The element will either contain an image or a video.

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

In the case that the element contains a video, I want to play it, but I don't want to play the video until it's finished animating in.

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

As such, I was wondering if there's an easy way to bind a callback to the end of a CSS animation in AngularJS?

docs 引用了 doneCallback，但我看不到指定方式...

The docs reference a doneCallback, but I can't see a way to specify it...

我想到的一种解决方法(?)是 $watching element.hasClass("ng-hide-add-active") 并等待它触发使用 (true, false) 表示它刚刚被删除了..

One workaround(?) I have thought of is $watching element.hasClass("ng-hide-add-active") and waiting for it to fire with (true, false), implying it's just been removed..

有更好的方法吗?

推荐答案

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

@michael-charemza answer worked great for me. If you are using Angular 1.3 they changed the promise a little. I got stuck on this for a little bit but here is the change that got it to work:

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

Plunker:代码示例

这篇关于在 AngularJS 动画完成后运行代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！