带有 ngHide 的 ngAnimate 无法添加 'ng-hide-animate' 挂钩 class
ngAnimate with ngHide fails to add 'ng-hide-animate' hook class
我有这种情况,我想使用 ngHide 指令将动画应用到 DOM 对象:
http://plnkr.co/edit/r4i7WbCepl2w9Svv0YHn?p=preview
在这个例子中,我有这个 JSON 对象数组:
$scope.items = [
{"key": 1, "values": []},
{"key": 2, "values": [21, 22, 23]},
{"key": 3, "values": [31, 32, 33, 34]}
];
此列表绑定到 <ul>
元素,该元素将显示此列表的键。选择其中一项时,值应显示在另一个 <div>
中,id 为 detailsList。将使用 ng-show="selectedItem"
语句显示。
根据 ngAnimate 的 Angular 文档,使用 CSS 添加动画:#detailsList.ng-hide
。
当 selecting/deselecting 第一个项目没有值时,动画效果很好,但对有值的项目效果不佳。
检查 detailsList 元素时,我发现钩子 class: ng-hide-animate
未按照文档所述在动画期间添加。
这是一个错误还是我错过了什么??
也许你可以自己写这个动画,专门为 ngRepeat
app.animation('.animation-ng-repeat', function(){
return {
leave : function(element, done) {
element.slideUp({complete: done});
},
enter : function(element, done) {
element.hide();
setTimeout(function() {
element.slideDown({complete: done});
}, 50);
}
}
});
然后将其作为 CSS class.
添加到您的 ng-repeat
这是一个错误,已由 AngularJS 团队在版本 1.4.4
中解决
检查这个 Git 问题:
https://github.com/angular/angular.js/issues/12453
我有这种情况,我想使用 ngHide 指令将动画应用到 DOM 对象:
http://plnkr.co/edit/r4i7WbCepl2w9Svv0YHn?p=preview
在这个例子中,我有这个 JSON 对象数组:
$scope.items = [
{"key": 1, "values": []},
{"key": 2, "values": [21, 22, 23]},
{"key": 3, "values": [31, 32, 33, 34]}
];
此列表绑定到 <ul>
元素,该元素将显示此列表的键。选择其中一项时,值应显示在另一个 <div>
中,id 为 detailsList。将使用 ng-show="selectedItem"
语句显示。
根据 ngAnimate 的 Angular 文档,使用 CSS 添加动画:#detailsList.ng-hide
。
当 selecting/deselecting 第一个项目没有值时,动画效果很好,但对有值的项目效果不佳。
检查 detailsList 元素时,我发现钩子 class: ng-hide-animate
未按照文档所述在动画期间添加。
这是一个错误还是我错过了什么??
也许你可以自己写这个动画,专门为 ngRepeat
app.animation('.animation-ng-repeat', function(){
return {
leave : function(element, done) {
element.slideUp({complete: done});
},
enter : function(element, done) {
element.hide();
setTimeout(function() {
element.slideDown({complete: done});
}, 50);
}
}
});
然后将其作为 CSS class.
添加到您的 ng-repeat这是一个错误,已由 AngularJS 团队在版本 1.4.4
中解决检查这个 Git 问题: https://github.com/angular/angular.js/issues/12453