AngularJS - 查找折叠动画的结尾 [英] AngularJS - Find end of collapse animation
问题描述
我对 angularui bootstrap 的 collapse 有一个简单的问题 指令.我有一个 菜单.当某人更改菜单时，内容会更改.但是，我想在应用这些更改之前添加动画.具体来说，我希望该部分在显示新内容之前折叠和展开.我可以折叠它，但我想知道如何检测折叠完成的时间，以便我可以展开它.
我可以使用我目前使用的 $timeout 方法，但感觉hackish"和不正确"，因为如果折叠动画的时间发生变化，那么我必须更改时间再次.
相关代码:
.directive("myBufferAnimation", function($timeout) {var ignoreFirst = true;返回函数(范围，元素，属性){scope.$watch("selectBuffer", function(newValue) {如果(忽略第一){忽略第一 = 假；返回;}scope.toCollapse = true;//在这里检测动画结束?//虚假解决方案，因为这只是等待一秒钟而不是监听动画结束$超时(功能(){scope.selected = newValue;scope.toCollapse = false;}, 1000);});}});这个 jsfiddle 说明了这个问题.
查看 angularui 引导程序的折叠指令，它使用 $transition 服务执行动画，但它不会暴露以挂钩到服务返回的承诺.但是，它确实更改了具有 collapse 指令的元素的类名.您可以通过在元素的 class 属性上放置监视来使用它来确定折叠动画何时完成.
下面是观察元素上的类的代码的工作示例.我进行了更改以使用 ng-change 来执行动画，而不是观看 selectBuffer.这消除了对 ignoreFirst 变量的需要.
angular.module("testApp", ["ui.bootstrap"]).controller("TestCtrl", function($scope) {//这实际上是从 ajax 调用中获取的$scope.data = [{"title": "标题 1","content": "内容 1"}, {"title": "第二个标题","content": "这里有一些内容"}, {"title": "标题 3","content": "内容 3"}];$scope.selected = $scope.data[0];$scope.selectBuffer = $scope.data[0];$scope.toCollapse = false;}).directive("myBufferAnimation", function($timeout) {返回函数(范围，元素，属性){scope.valueChanged = function() {scope.toCollapse = true;//保存从 $watch 调用返回的取消注册方法.var unregisterWatch = scope.$watch(function() {return element.attr('class');}，函数(新类，旧类){//如果 newClass 是 'collapse' 而 oldClass 是 'collapsing'//这意味着折叠动画已经完成.if (newClass.indexOf("collapse") !== -1 && oldClass.indexOf("collapsing") !== -1) {scope.selected = scope.selectBuffer;scope.toCollapse = false;//取消注册类属性上的 $watch//因为它不再需要了.取消注册手表()；}});};}});<头><link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/><script src="https://code.angularjs.org/1.2.26/angular.js"></script><script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"><script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"><script data-require="angular-ui-bootstrap@0.11.0" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script><身体><div ng-app="testApp"><div ng-controller="TestCtrl"><select ng-options="opt as opt.title for opt in data" ng-model="selectBuffer" ng-change="valueChanged()"></select><br/><div my-buffer-animation="" collapse="toCollapse" class="test"><h1>{{selected.title}}</h1><p>{{selected.content}}</p></html>
I have a simple problem with angularui bootstrap's collapse directive. I have a <select> menu. When the someone changes the menu, the content changes. However, I would like to add an animation before applying these changes. Specifically, I would like for the section to collapse and uncollapse before showing the new content. I can collapse it, but I would like to know how to detect when the collapse has finished so I can uncollapse it.
I could use the $timeout method that I currently use, but it feels "hackish" and "incorrect," because if the time for the collapse animation changes, then I have to change the time again.
Relavent code:
.directive("myBufferAnimation", function($timeout) {
var ignoreFirst = true;
return function(scope, element, attrs) {
scope.$watch("selectBuffer", function(newValue) {
if (ignoreFirst) {
ignoreFirst = false;
return;
}
scope.toCollapse = true;
// Detect end of animation here?
// Bogus solution, as this just waits for one second rather than listening for the end of animation
$timeout(function() {
scope.selected = newValue;
scope.toCollapse = false;
}, 1000);
});
}
});
This jsfiddle illustrates the problem.
Looking at the angularui bootstrap's collapse directive, it does the animation using the $transition service but it doesn't expose away to hook into the promise return by the service. It does however change the class name of the element that has the collapse directive on it. You can use that to determine when the collapse animation has completed by putting a watch on the class attribute of the element.
Below is a working example of the code watching the class on the element. I made a change to use ng-change to execute the animation instead of the watching the selectBuffer. This eliminates the need for the ignoreFirst variable.
angular.module("testApp", ["ui.bootstrap"]).controller("TestCtrl", function($scope) {
// This would actually be fetched from an ajax call
$scope.data = [{
"title": "Title 1",
"content": "Content 1"
}, {
"title": "The Second Title",
"content": "Some content goes here"
}, {
"title": "Title 3",
"content": "Content 3"
}];
$scope.selected = $scope.data[0];
$scope.selectBuffer = $scope.data[0];
$scope.toCollapse = false;
}).directive("myBufferAnimation", function($timeout) {
return function(scope, element, attrs) {
scope.valueChanged = function() {
scope.toCollapse = true;
// save off the unregister method returned from $watch call.
var unregisterWatch = scope.$watch(function() {
return element.attr('class');
}, function(newClass, oldClass) {
// If the newClass is 'collapse' and the oldClass is 'collapsing'
// this means that the collapsing animation has completed.
if (newClass.indexOf("collapse") !== -1 && oldClass.indexOf("collapsing") !== -1) {
scope.selected = scope.selectBuffer;
scope.toCollapse = false;
// unregister the $watch on the class attribute
// since it is no longer needed.
unregisterWatch();
}
});
};
}
});
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.2.26/angular.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular-ui-bootstrap@0.11.0" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
</head>
<body>
<div ng-app="testApp">
<div ng-controller="TestCtrl">
<select ng-options="opt as opt.title for opt in data" ng-model="selectBuffer" ng-change="valueChanged()"></select>
<br />
<div my-buffer-animation="" collapse="toCollapse" class="test">
<h1>{{selected.title}}</h1>
<p>{{selected.content}}</p>
</div>
</div>
</div>
</body>
</html>
这篇关于AngularJS - 查找折叠动画的结尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
