我正在使用AngularJS,并希望在完成动画时得到通知。我知道可以使用像这样的javascript定义的动画来完成此操作myApp.animation(...),但是我很好奇是否可以不使用javascript来执行此操作。
myApp.animation(...)
问题: 是否可以使用角度 ng-enter 和 ng-leave css- transitions并指定完成的回调?我猜该animationend事件已被触发,因此应该有一种方法可以执行此操作。
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删除类后)打电话。
myDone()
ng-enter-active
是的,您可以使用$animate服务,通常是在自定义指令中完成。一个简单的动画案例是在单击时以某种方式对元素进行动画处理。例如,说要删除点击元素,并使用.ng- leave指定的动画传递回调
$animate
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。可以由以下人员使用:
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”参数以在以下位置传递回调:
animated-if
scope: { 'animatedIf': '=', 'animatedIfEnterCallback': '&', 'animatedIfLeaveCallback': '&' },
然后在动画之后修改对的调用$animate.enter并$animate.leave调用这些回调:
$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指令的作用域创建并使用作用域作为子项:
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>'