是的,您可以使用该
$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 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 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>'



