Javascript AngularJS css动画+；完成回调

我正在使用AngularJS，并希望在动画完成时收到通知。我知道这可以通过javascript定义的动画来实现，比如

myApp.animation（…）

，但我很好奇，如果没有javascript我是否可以做到这一点

问题：是否可以使用角度ng enter和ng leavecss转换，并指定一个完成的回调？我猜

animationend

事件被触发了，所以应该有一种方法来做到这一点

我有这个：

HTML:

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

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

我想在动画完成时调用

myDone（）

（即在

ng enter active

类被删除之后）。

是的，您可以使用服务，这通常在自定义指令中完成。动画的一个简单例子是在单击时以某种方式为元素设置动画。例如，要在单击时删除元素，使用.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);
        });
      });
    }
  };
});

可以像这样使用：

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

你可以看到

然而，据我所知，ngIf没有任何钩子来传递回调，因此您必须编写自己的指令。下面是的说明，最初是从复制的，并重命名为

animatedIf

。可由以下人员使用：

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

然后修改对

$animate的调用。输入

和

$animate。离开

在动画后调用这些回调：

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

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

在指令的初始加载时不调用回调函数，enter有点复杂。由于

scope

参数，该指令创建一个隔离的作用域，然后在转包内容时使用该作用域。因此，需要做的另一个更改是从指令的

$parent

范围创建并使用一个范围作为子范围：行

 childScope = $scope.$new();

必须改为

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

你可以。这只是经过了非常短暂的测试

可能有一种更简单的方法可以做到这一点，可能不是完全重新创建ngIf指令，而是使用模板创建一个指令，该模板使用原始ngIf和一些包装div，例如

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

模板：“”

是的，这个活动很有效。我建议您阅读以下内容：这是一个运行动画并在动画结束时得到通知的工厂。学习这个想法并尝试将其应用到您的用例中。谢谢！！但是，动画if不适用于动画if内的数据绑定。看到这一点你是对的：我已经编辑了允许数据绑定到原始范围的帖子和Plunker链接。仅供参考，你可以使用angular.noop而不是（function（）{}）。保存3个字符：）@MichalCharemza根据您的回答，似乎我对未使用

$scope.$apply

有问题。例如，当我在回调中更改控制器时，视图不会更改。我目前正在使用类似于

$scope.$apply（function（）{ctrl.value=true；}）的结构在我的回调中解决此问题。我已使用
childScope更新了以支持控制器更改。$apply
我不确定脚本是否完全正确，但提供它作为解决方案的建议。
 childScope = $scope.$parent.$new();

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