javascript - 带有 ngHide 的 ngAnimate 无法添加 'ng-hide-animate' Hook 类

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]}
];

此列表绑定(bind)到 <ul>将显示此列表的键的元素。选择其中一项时，值应显示在另一个 <div> 中带有 id 详细信息列表。将使用 ng-show="selectedItem" 显示声明。

使用 CSS 添加动画:#detailsList.ng-hide ，根据 ngAnimate 的 Angular 文档。

选择/取消没有值的第一个元素时，动画效果很好，但与具有值的元素效果不佳。

检查 detailsList 元素时，我发现 Hook 类: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 类添加到您的 ng-repeat 中。