I am working on a case where I need to add animation to a DOM object using the ngHide directive:
Within this scenario, I have an array of JSON objects:
$scope.items = [
{"key": 1, "values": []},
{"key": 2, "values": [21, 22, 23]},
{"key": 3, "values": [31, 32, 33, 34]}
];
This list is linked to a <ul> element displaying the keys. Upon selecting an item, its corresponding values should be shown in another <div> with the id detailsList, utilizing ng-show="selectedItem".
The animation is implemented through CSS: #detailsList.ng-hide, following the Angular documentation for ngAnimate.
While the animation works correctly when toggling the first item without any values, it does not function as expected with items containing values.
Upon inspection of the detailsList element, I noticed that the hook class ng-hide-animate is not being applied during the animation process, which contradicts the documentation.
Could this be a bug or is there something I overlooked?