AngularJS CSS动画+完成回调

大佬教程收集整理的这篇文章主要介绍了AngularJS CSS动画+完成回调，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决AngularJS CSS动画+完成回调？

是的，您可以使用该$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() {})));

回车键@R_801_10344@，要在初始加载指令时不调用回调函数。由于有此scope参数，此伪指令创建一个隔离的作用域，然后在包含内容时使用它。因此，需要进行的另一项更改是从$parent指令的作用域中创建作用域并将其用作子元素：

 childScope = $scope.$new();

必须更改为

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

您可以@L_403_0@。这只是经过极其简短的测试。

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

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

解决方法

<div ng-if="item" class="myDiv"> {{ item.name }} </div>

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

大佬总结

以上是大佬教程为你收集整理的AngularJS CSS动画+完成回调全部内容，希望文章能够帮你解决AngularJS CSS动画+完成回调所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。