AngularJS CSS动画+完成回调

小编典典

AngularJS CSS动画+完成回调

css

我正在使用AngularJS，并希望在动画制作完成后得到通知。我知道可以使用像这样的javascript定义的动画来完成此操作myApp.animation(...)，但是我很好奇我是否可以不用javascript来做到这一点。

问题： 是否可以使用角度 ng-enter 和 ng-leave 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删除类之后）调用。

阅读 304

2020-05-16

共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;
}

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

但是，据我所知，ngIf没有任何挂钩可以传递回调，因此您必须编写自己的指令。以下是对ngIf修改版本的描述，该版本最初是从ngIf源复制并重命名为animatedIf。可以由以下人员使用：

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

您可以在此Plunker中看到修改后的ngIf指令的完整源代码。这只是经过极其简短的测试。

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

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

2020-05-16