AngularJS css 动画 + 完成回调 [英] AngularJS css animation + done callback

问题描述

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

问题:是否可以使用 angular ng-enter 和 ng-leave css-transitions，并指定完成回调?我猜 animationend 事件被触发了，所以应该有办法做到这一点.

我有这个:

HTML:

{{ item.name }} </div>

CSS:

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

我想在动画完成时调用 myDone()(即在删除 ng-enter-active 类之后).

解决方案

是的，你可以，使用 $animate 服务，通常在自定义指令中完成.一个简单的动画案例是在点击时以某种方式为元素设置动画.比如说，在点击时删除一个元素，使用 .ng-leave 指定一个动画，传递一个回调

app.directive('leaveOnClick', function($animate) {返回 {范围: {'leaveOnClick': '&'},链接:功能(范围，元素){scope.leaveOnClick = scope.leaveOnClick ||(功能() {});element.on('点击', function() {范围.$应用(函数(){$animate.leave(element, scope.leaveOnClick);});});}};});

可以像这样使用:

<div class="my-div" leaveOnClick="done()">点击删除</div>

使用 CSS 淡出元素:

.my-div.ng-leave {不透明度:1；过渡:不透明度1s；-webkit-transition: 不透明度 1s；}.my-div.ng-leave.ng-leave-active {不透明度:0；}

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

但是，ngIf 没有任何钩子来传递我所知道的回调，因此您必须编写自己的指令.以下是对 ngIf 的修改版本 的描述，最初是从 ngIf 源，并重命名为animatedIf.它可以用于:

<div class="my-div" animation-if="shown" animation-if-leave-callback="leaveDone()" animation-if-enter-callback="enterDone()" >一些内容

它的工作方式是使用手动观察器对传递给 animated-if 的表达式的更改做出反应.与原始 ngIf 的主要区别在于添加了一个范围"参数来传递回调:

范围:{'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();

您可以查看此 Plunker 中修改后的 ngIf 指令的完整来源.这只是经过极其简单的测试.

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

模板:'
'

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.

Question: Is it possible to use angular ng-enter and ng-leave css-transitions, and specify a done callback? I guess the animationend event is fired, so there should be a way to do this.

I have this:

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 {...}

And I want to call myDone() when the animation has finished (i.e. after the ng-enter-active class is removed).

解决方案

Yes you can, using the $animate service, 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

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:

.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.

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:

<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:

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

and then modifying the calls to $animate.enter and $animate.leave to call these callbacks after the animation:

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 scope parameter, 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 $parent scope of the directive: the line

 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.

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

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

这篇关于AngularJS css 动画 + 完成回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！