带有 ngHide 的 ngAnimate 无法添加 'ng-hide-animate' 挂钩 class

Question

我有这种情况，我想使用 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 未按照文档所述在动画期间添加。

这是一个错误还是我错过了什么？？

Answer 1

也许你可以自己写这个动画，专门为 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

Answer 2

这是一个错误，已由 AngularJS 团队在版本 1.4.4

中解决

检查这个 Git 问题： https://github.com/angular/angular.js/issues/12453

带有 ngHide 的 ngAnimate 无法添加 'ng-hide-animate' 挂钩 class

ngAnimate with ngHide fails to add 'ng-hide-animate' hook class

javascript

css

angularjs

ng-animate