我有一个简单的问题角度 ui 引导程序 http://angular-ui.github.io/bootstrap/#/collapse's collapse指示。我有一个<select>菜单。当有人改变菜单时，内容就会改变。但是，我想在应用这些更改之前添加动画。具体来说，我希望该部分在显示新内容之前折叠和展开。我可以折叠它，但我想知道如何检测折叠何时完成，以便我可以取消折叠它。
我可以使用$timeout我目前使用的方法，但感觉“hackish”和“不正确”，因为如果折叠动画的时间发生变化，那么我必须再次更改时间。
相关代码：
.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 http://jsfiddle.net/prankol57/mcp8L0nn/说明了问题。
查看 angularui bootstrap 的折叠指令，它使用 $transition 服务执行动画，但它不会公开挂钩服务返回的承诺。但是，它确实更改了具有以下属性的元素的类名称：collapse关于它的指令。您可以通过在元素的 class 属性上放置监视来确定折叠动画何时完成。
下面是监视元素上的类的代码的工作示例。我做了更改以使用ng-change执行动画而不是观看selectBuffer。这消除了对ignoreFirst多变的。
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="[email protected] /cdn-cgi/l/email-protection" 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="[email protected] /cdn-cgi/l/email-protection" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="[email protected] /cdn-cgi/l/email-protection" 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
