I am currently using ng-animate in my project, where I have a list of entries displayed through ng-repeat. The issue I'm facing is that when I make a selection on one entry, it disappears from the list. I have properly defined the classes .ng-move, .ng-move-active, .ng-leave, and .ng-leave-active to handle animations for removing and reordering entries.
What I am trying to achieve is to trigger the .ng-move animation when an entry is removed, causing all other entries to slide up. However, I have noticed that the .splice() operation does not automatically trigger the .ng-move animation. Is there a way to force this animation to happen after a .splice()?
Below is the html code snippet:
<div data-ng-repeat="entry in data" class="container card-drop card-shift">
<card data="entry"></card>
</div>
Here are the corresponding CSS classes:
.card-drop.ng-leave {
transition: 0.5s ease-in-out;
opacity: 1;
}
.card-drop.ng-leave.ng-leave-active {
transform: scale(0.5);
opacity: 0;
}
.card-shift.ng-move {
transition: 0.5s ease-in-out;
}
.card-shift.ng-move.ng-move-active {
transform: translateY(-284px);
}
In the JavaScript part of the code, the event triggering the concern is simply $scope.data.splice(index, 1);
EDIT: http://plnkr.co/edit/nz38XxPbV4Ycqdn3QYVP?p=preview
Above is the link to the plunk demonstrating the issue I am describing. When you click on an entry and it gets spliced, the .ng-leave animation is triggered but none of the ng-move animations occur.