AngularJS css animation + done回调 [英] AngularJS css animation + done callback

问题描述

我使用AngularJS，并希望在动画完成时收到通知。我知道这可以通过javascript定义的动画像这样 myApp.animation（...），但我很好奇，如果我可以没有javascript。 >

问题：可以使用角度 ng-enter 和 ng-leave css转换，并指定完成回调？我想， animationend 事件被触发，所以应该有一个方法来做到这一点。

我有这个：

HTML ：

 < div ng-if =itemclass =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

解决方案

可以，使用 $ animate 服务，通常会在自定义指令。一个简单的动画效果是在点击时以某种方式使元素动画化。例如，要删除一个点击的元素，使用.ng-leave指定动画，传递回调

 应用。指令（'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-divleaveOnClick =done（）>点击删除< / 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-divanimated-if =shownanimated-if -leave-callback =leaveDone（）animated-if-enter-callback =enterDone（）>部分内容< / div> 
  

它的工作方式是它使用手动观察器来对传递给 animated-if 。与原始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（）{}）））; 
  

输入一个在初始加载指令时不调用回调有点复杂。由于 scope 参数，此伪指令创建一个隔离的作用域，然后在转录内容时使用该作用域。因此，所需的另一个更改是从指令的 $ parent 范围中创建和使用范围作为子级：

  childScope = $ scope。$ new（）; 
  

必须更改为

  childScope = $ scope。$ parent。$ new（）; 
  

您可以查看此Plunker中修改的ngIf指令的完整来源。

这可能是一个更简单的方法，也许没有完全重新创建ngIf指令，但创建一个指令模板使用带有一些封装div的原始ngIf，例如

  template：'< div>< div ng-if = localVariable>< divng-transclude>< / div>< / div>< / 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 animation + done回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！