I'm struggling with understanding basic AngularJS 1.4+CSS animation concepts.
I have a list where new items are added at the top and removed from the bottom when the maximum number of items (5 in the example below) is reached.
The code below achieves a fade animation for this situation:
angular.module("testApp", ["ngAnimate"])
.controller("testCtrl", function($scope) {
var lastId = 0;
$scope.items = [];
$scope.add = function() {
if (!$scope.newValue) { return; }
$scope.items.unshift({id: ++lastId, name:$scope.newValue});
$scope.newValue = '';
while ($scope.items.length > 5) {
$scope.items.pop();
}
};
});.list-item.ng-enter {
transition: all 0.4s ease-out;
opacity: 0;
}
.list-item.ng-enter.ng-enter-active {
opacity: 1;
}
.list-item.ng-leave {
transition: all 0.4s ease-out;
opacity: 1;
}
.list-item.ng-leave.ng-leave-active {
opacity: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.min.js"></script>
<form ng-app="testApp" ng-controller="testCtrl">
<div>
<input type="text">
<button ng-click="add()">Add</button>
</div>
<table>
<tr class="list-item" ng-repeat="item in items track by item.id">
<td>{{item.name}}</td>
</tr>
</table>
</form>However, I am looking for animations where the newly added items expand in height as they slide in from the top, the exiting items shrink in height as they slide out from the bottom, and the remaining items move downwards to their new positions. I'm unsure how to achieve this effect.
I attempted using the height property instead of opacity, but it did not work well. I also want the elements to resize based on font size rather than setting an explicit height.
The preferred method is changing the height, but it would also be acceptable to have a pure sliding animation with fading effects. It's crucial that the animations do not affect the size of the parent or surrounding elements on the page.
Usually, only one item enters or leaves at a time, although there may be scenarios where two items enter or leave simultaneously. Ideally, the animations should delay appropriately to give the appearance of sequential sliding, but complexity might prevent this.
In a previous version of the page, jQuery animations were used with "slideUp" for removal and "slideDown" for addition, maintaining order since items were manually inserted/deleted before Angular. This effect worked well, and I aim to replicate it through CSS animations or ng-repeat, though I'm uncertain if they support controlling animation order like jQuery did.