AngularJS CSS动画+完成回调 [英] AngularJS css animation + done callback

问题描述

我使用AngularJS并想获得通知当动画完成。我知道这可以像这样 myApp.animation（...） JavaScript的定义动画做的，但我很好奇，如果我能做到这一点没有JavaScript的。

I am using AngularJS and would like to get notified when an animation is done. I know this can be done with javascript-defined animations like this myApp.animation(...), but I am curious if I can do this without javascript.

问：是否有可能使用角 NG-输入的和 NG-休假的 CSS-过渡，并指定完成回调？我猜 animationend 事件被触发，所以应该有办法做到这一点。

Question: Is it possible to use angular ng-enter and ng-leave css-transitions, and specify a done callback? I guess the animationend event is fired, so there should be a way to do this.

我有这样的：

HTML：

<div ng-if="item" class="myDiv"> {{ item.name }} </div>

CSS：

.myDiv.ng-enter {...}
.myDiv.ng-enter.ng-enter-active {...}
.myDiv.ng-leave {...}
.myDiv.ng-leave.ng-leave-active {...}

和我想打电话给 myDone（）当动画完成（即后纳克进入活性类被删除）。

And I want to call myDone() when the animation has finished (i.e. after the ng-enter-active class is removed).

推荐答案

是的，你可以使用 $动画服务，这通常会在自定义指令来完成。动画的简单的情况下，会在点击某种方式动画的元素。说，例如在点击使用.ng-离开指定删除元素，与动画，传递一个回调

Yes you can, using the $animate service, which would usually be done in a custom directive. A simple case of animation would be to animate an element in some way on click. Say, for example to remove an element on click, with an animation specified using .ng-leave, passing a callback

app.directive('leaveOnClick', function($animate) {
  return {
    scope: {
      'leaveOnClick': '&'
    },
    link: function (scope, element) {
      scope.leaveOnClick = scope.leaveOnClick || (function() {});
      element.on('click', function() {
        scope.$apply(function() {
          $animate.leave(element, scope.leaveOnClick);
        });
      });
    }
  };
});

其可用于这样的：

which could be used like:

<div class="my-div" leaveOnClick="done()">Click to remove</div>

使用CSS淡出元素的：

With CSS to fade the element out:

.my-div.ng-leave {
  opacity: 1;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
}
.my-div.ng-leave.ng-leave-active {
  opacity: 0;
}

您可以看到在这个Plunker 以上的动画动作。

You can see the above animation in action at this Plunker.

不过，ngIf没有任何挂钩传递一个回调，我知道的，所以你必须编写自己的指令。下面是 ngIf 的修改后的版本，最初从ngIf源，并更名为 animatedIf 。它可以通过使用

However, ngIf doesn't have any hooks to pass a callback in that I know of, so you'll have to write your own directive. What follows is a description of a modified version of ngIf, originally copied from the ngIf source, and renamed to animatedIf. It can be used by:

<div class="my-div" animated-if="shown" animated-if-leave-callback="leaveDone()" animated-if-enter-callback="enterDone()" >Some content</div>

它的工作方式是，它采用手动守望反应传递到除权pression变化的动画，如果。原来的ngIf的主要区别是增加了一个范围参数来传递回调中：

The way it works is that it uses a manual watcher to react to changes of the expression passed to animated-if. The key differences to the original ngIf are the addition of a 'scope' parameter to pass the callbacks in:

scope: {
  'animatedIf': '=',
  'animatedIfEnterCallback': '&',
  'animatedIfLeaveCallback': '&'
},

和然后修改以调用 $ animate.enter 和 $ animate.leave 来调用后，这些回调动画：

and then modifying the calls to $animate.enter and $animate.leave to call these callbacks after the animation:

var callback = !oldValue && $scope.animatedIfEnterCallback ? $scope.animatedIfEnterCallback : (function() {});
$animate.enter(clone, $element.parent(), $element, callback);

$animate.leave(block.clone, ($scope.animatedIfLeaveCallback || (function() {})));

输入一个是比较复杂一点不调用回调的指令的初始加载。因为范围参数，该指令创建一个孤立的范围，它则transcluding内容时使用。因此需要另一个变化是创建和使用范围，从指令的 $父范围儿：行

The enter one is a bit more complicated to not call the callback on initial loading of the directive. Because of the scope parameter, this directive creates an isolated scope, which it then uses when transcluding the contents. So another change that is required is to create and use a scope as a child from the $parent scope of the directive: the line

 childScope = $scope.$new();

必须改变，以

 childScope = $scope.$parent.$new();

您可以看到修改后的ngIf指令在这个Plunker 完整的源代码。这仅仅是测试非常简单。

You can see the full source of the modified ngIf directive in this Plunker. This has only been tested extremely briefly.

有可能是这样做的一个简单的方法，也许通过不完全重新创建ngIf指令，但创建与模板的指令，使用原来的ngIf有一些包装的div，如

There may well be a simpler way of doing this, maybe by not recreating the ngIf directive fully, but creating a directive with template that uses the original ngIf with some wrapper divs, such as

template: '<div><div ng-if="localVariable"><div ng-transclude></div></div></div>'

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