Currently using AngularJS v1.4.8 with ngAnimate injected into my controller.
In the process of creating a dynamic list using ngRepeat, tied to an array. The addition and updating of items in the list function smoothly with animations working as intended. However, upon deleting an item from the list, the subsequent elements below it snap abruptly into place. Seeking a solution for these trailing elements to transition gracefully into position instead.
Just to emphasize, when removing an item, the elements that follow suddenly fill the space left by the deleted element. Desire is for them to elegantly slide into this void.
Attempted adjustments with max-height property, setting it as a fixed value for entry and then to 0 for exit. Unfortunately, no changes observed - no shrinking effect whatsoever.
Which section of CSS should address this issue?
- ng.enter
- ng.leave
- ng.move (mild suspicion that drag&drop examples might not apply here)
View
This is how the HTML "list" is structured:
<div ng-repeat="cItem in commentData.comments" class="animate-repeat">CSS
Present CSS setup utilized:
.animate-repeat.ng-enter,
.animate-repeat.ng-move
{
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
opacity:0;
}
.animate-repeat.ng-leave
{
-webkit-animation:0.5s fadeOut;
-moz-animation:0.5s fadeOut;
-o-animation:0.5s fadeOut;
animation:0.5s fadeOut;
opacity:1;
}
.animate-repeat.ng-enter.ng-enter-active,
.animate-repeat.ng-move.ng-move-active
{
opacity:1;
}
.animate-repeat.ng-leave.ng-leave-active
{
opacity: 0;
}
/* Applied across platforms - not displayed here */
fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
Screenshots
Before deletion https://i.stack.imgur.com/67stW.png
During deletion https://i.stack.imgur.com/dBTrC.png