ngAnimate with ngHide fails to add hook 'ng-hide-animate' class in case of binding #12453
Description
I have this case, where I want to apply animation to a DOM object with ngHide directive:
http://plnkr.co/edit/r4i7WbCepl2w9Svv0YHn?p=preview
In this example, I have this JSON objects array:
$scope.items = [
{"key": 1, "values": []},
{"key": 2, "values": [21, 22, 23]},
{"key": 3, "values": [31, 32, 33, 34]}
];
This list is bound to a <ul>
element which will show the keys of this list. When selecting an item of them, values should be displayed in another <div>
with id detailsList. which will be shown using ng-show="selectedItem"
statement.
Animation is added using CSS: #detailsList.ng-hide
, according to Angular documentation of ngAnimate.
When selecting/deselecting the first item with no values, animation works well, but not with the items with values.
When inspecting detailsList element, I found that hook class: ng-hide-animate
is not added during animation as described by documentation.
Is it a bug or I missed sth??