Question

我正在使用AngularJS，并希望在完成动画时收到通知。我知道这可以通过javascript定义的动画完成，例如myApp.animation(...)，但我很好奇我是否可以在没有javascript的情况下执行此操作。

问题：是否可以使用有角度 ng-enter 和 ng-leave < / strong> css-transitions，并指定完成回调？我想animationend事件被触发了，所以应该有办法做到这一点。

我有这个：

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()课程后）调用ng-enter-active。

Answer 1

是的，你可以使用$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);
        });
      });
    }
  };
});

可以像：

一样使用

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

使用CSS淡化元素：

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

您可以看到the above animation in action at this Plunker。

但是，ngIf没有任何钩子来传递回调，因为我知道，所以你必须编写自己的指令。以下是最初从a modified version of ngIf复制并重命名为animatedIf的{{3}}的说明。它可以用于：

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

它的工作方式是它使用手动观察器来响应传递给animated-if的表达式的变化。与原始ngIf的主要区别是添加了一个'scope'参数来传递回调：

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

然后修改对$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() {})));

在初始加载指令时不调用回调更复杂一点。由于scope参数，该指令创建了一个隔离的范围，然后在转换内容时使用该范围。因此，需要进行的另一项更改是从指令的$parent范围创建并使用范围作为子项：行

 childScope = $scope.$new();

必须更改为

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

你可以ngIf source。这只是非常短暂的测试。

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

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

AngularJS css动画+完成回调

1 个答案: