javascript AngularJS css 动画 + 完成回调
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20828681/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS css animation + done callback
提问by swenedo
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.
我正在使用 AngularJS 并希望在动画完成时收到通知。我知道这可以通过像这样的 javascript 定义的动画来完成myApp.animation(...)，但我很好奇我是否可以在没有 javascript 的情况下做到这一点。
Question:Is it possible to use angular ng-enterand ng-leavecss-transitions, and specify a done callback? I guess the animationendevent is fired, so there should be a way to do this.
问题：是否可以使用 angular ng-enter和ng-leavecss-transitions，并指定完成回调？我猜这个animationend事件被触发了，所以应该有办法做到这一点。
I have this:
我有这个：
HTML:
HTML：
<div ng-if="item" class="myDiv"> {{ item.name }} </div>
CSS:
CSS：
.myDiv.ng-enter {...}
.myDiv.ng-enter.ng-enter-active {...}
.myDiv.ng-leave {...}
.myDiv.ng-leave.ng-leave-active {...}
And I want to call myDone()when the animation has finished (i.e. after the ng-enter-activeclass is removed).
我想myDone()在动画完成时调用（即ng-enter-active类被删除后）。
回答by Michal Charemza
Yes you can, using the $animateservice, 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
是的，您可以使用该$animate服务，这通常在自定义指令中完成。一个简单的动画案例是在点击时以某种方式为元素设置动画。比如说，例如在点击时删除一个元素，使用 .ng-leave 指定一个动画，传递一个回调
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>
With CSS to fade the element out:
使用 CSS 淡出元素：
.my-div.ng-leave {
opacity: 1;
transition: opacity 1s;
-webkit-transition: opacity 1s;
}
.my-div.ng-leave.ng-leave-active {
opacity: 0;
}
You can see the above animation in action at this Plunker.
你可以在这个 Plunker 上看到上面的动画。
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:
但是，ngIf 没有任何钩子来传递我所知道的回调，因此您必须编写自己的指令。以下是对 ngIf 修改版本的描述，最初从ngIf 源复制，并重命名为animatedIf. 它可以由以下人员使用：
<div class="my-div" animated-if="shown" animated-if-leave-callback="leaveDone()" animated-if-enter-callback="enterDone()" >Some content</div>
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:
它的工作方式是使用手动观察器对传递给animated-if. 与原始 ngIf 的主要区别是添加了一个“范围”参数来传递回调：
scope: {
'animatedIf': '=',
'animatedIfEnterCallback': '&',
'animatedIfLeaveCallback': '&'
},
and then modifying the calls to $animate.enterand $animate.leaveto call these callbacks after the animation:
然后在动画之后修改对$animate.enter和$animate.leave调用这些回调的调用：
var callback = !oldValue && $scope.animatedIfEnterCallback ? $scope.animatedIfEnterCallback : (function() {});
$animate.enter(clone, $element.parent(), $element, callback);
$animate.leave(block.clone, ($scope.animatedIfLeaveCallback || (function() {})));
The enter one is a bit more complicated to not call the callback on initial loading of the directive. Because of the scopeparameter, 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 $parentscope of the directive: the line
在指令的初始加载时不调用回调有点复杂。由于scope参数的原因，该指令创建了一个隔离的范围，然后在转换内容时使用该范围。因此，需要的另一个更改是创建和使用一个范围作为$parent指令范围的子项：该行
childScope = $scope.$new();
must be changed to
必须改为
childScope = $scope.$parent.$new();
You can see the full source of the modified ngIf directive in this Plunker. This has only been tested extremely briefly.
您可以在此 Plunker 中查看修改后的 ngIf 指令的完整源代码。这只是经过非常简单的测试。
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
很可能有一种更简单的方法来做到这一点，也许不是完全重新创建 ngIf 指令，而是创建一个带有模板的指令，该模板使用原始 ngIf 和一些包装器 div，例如
template: '<div><div ng-if="localVariable"><div ng-transclude></div></div></div>'
