javascript - AngularJS css 动画 + 完成回调

Question

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

问题是否可以使用 Angular 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 没有任何钩子(Hook)来传递回调，因此您必须编写自己的指令。以下是对 a modified version of ngIf 的描述, 最初复制自 ngIf source , 并重命名为 animatedIf。它可以用于:

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

它的工作方式是使用手动观察器对传递给 animated-if 的表达式的变化使用react。与原始 ngIf 的主要区别是添加了一个“作用域”参数来传递回调:

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() {})));

enter 有点复杂，因为在指令的初始加载时不调用回调。由于 scope 参数，该指令创建了一个独立的范围，然后在包含内容时使用它。因此，需要进行的另一项更改是从指令的 $parent 范围创建和使用一个范围作为子范围:行

 childScope = $scope.$new();

必须改为

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

您可以 see the full source of the modified ngIf directive in this Plunker .这只经过了非常简短的测试。

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

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