I have looked at this example:
How can I animate the movement of remaining ng-repeat items when one is removed?
But it does not do everything I would like it to do. I have something like this:
<div class="please-work" ng-repeat="item in array track by item.id">
{{item}}
<button ng-click="removeItem(item)">del</button>
</div>
When I use ng-animate like so:
.please-work.ng-leave {
transition:0.5s linear all;
opacity:1;
}
.please-work.ng-leave.ng-leave-active {
opacity:0;
}
The item fades out nicely, but the other elements after it jump into position.
The answer I linked to at the top has a workaround, but it requires knowledge of the element's height in pixels. Basically, it says to animate the height of the element from its original height to zero in order to create the desired sliding effect. My problem is that my elements have varying heights, and I don't know how to reference this starting height for the start of the css animation. Is there a way to do this? Thank you in advance, it's been a long evening fighting this.
edit: I misunderstood the given example. Animating max-height (not height) sort of works for this, but it is a little imprecise. Is there any cleaner method?
Also, I don't necessarily want the height to change, visually, though I'm pretty sure I can work around that using an invisible wrapper.Also, what if I want to animate the rest of the remaining elements in some other way?
