运行code的AngularJS动画完成后， [英] Running code after an AngularJS animation has completed

问题描述

我有NG-节目的元素，其知名度是由切换。我还使用CSS动画 - 自动从那些NG-动画 - 这个元素的动画其入门

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.

因此​​，我在想，如果有一个回调绑定到 CSS 在AngularJS动画结束一个简单的方法？

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

参考文档一个<$​​ C $ C> doneCallback ，但我看不到的方式来指定它...

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

一个解决方法（？）我还以为是 $观看 ING element.hasClass（NG-捉迷藏添加活性）并等待它与<$ C $丙火>（真，假），这意味着它只是被删除。

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..

有没有更好的方式？

推荐答案

@迈克尔charemza回答为我工作很好。如果您使用的是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： code为例

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