css - Angular - after deleting from ngRepeat, remaining items don't slide smoothly but rather snap/jump into place -

i'm using angularjs v1.4.8 , included/injected nganimate in controller.

i building dynamic list using ngrepeat, bound array. adding , updating items in list works , animations run expected. however, when delete item list, trailing elements (i.e. elements below deleted item) snap position. trailing elements gracefully slide place.

just reiterate. when delete item, trailing items snap white space left element being deleted. want trailing items smoothly slide white space.

i've tried playing around max-height, setting fixed value enter , 0 leave. doesn't work @ - nothing happens. (i.e. no shrinking of kind).

which part of css handle this?

• ng.enter
• ng.leave
• ng.move (sneaky suspicion won't example refer drag&drop functionality)

view

this html "list" looks like:

<div ng-repeat="citem in commentdata.comments" class="animate-repeat">

css

here current css

.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; }   /* did platforms - not showing here though */ fadeout {     {         opacity: 1;     }     {         opacity: 0;     } } 

screen dumps

before delete

while deleting

try this:

.animate.ng-enter,  .animate.ng-leave {      -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;     -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;     -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;     -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;     transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;     position: relative;     display: block;     overflow: hidden;     text-overflow: clip;     white-space:nowrap; }   .animate.ng-leave.animate.ng-leave-active, .animate.ng-enter {     opacity: 0;     width: 0px;     height: 0px; }  .animate.ng-enter.ng-enter-active,  .animate.ng-leave {     opacity: 1;     width: 150px;     height: 30px; }  .ng-move{   border: 1px solid red; }