Hey, can you give me a hand with this? :)
I'm attempting to create a sleek sliding up and down list in Angular, but I'm struggling to make it work. My CSS skills are not very advanced, so I'm still learning and gave it my best shot: http://codepen.io/anon/pen/MmyeXb
HTML
<div class="text-center" ng-app="myApp" ng-controller="ItemCtrl">
<!-- button up -->
<button class="btn btn-success" ng-click="up()">up</button>
<div style="width: 25%;margin-left: 37%" class="bg-info p-3 container">
<ul class="list-group">
<!-- list item to be animated -->
<li class="list-group-item m-1" ng-class="slide=='up' ? 'slide-up':'slide-down '" ng-repeat="item in items">
{{item}}
</li>
</ul>
</div>
<!-- button down -->
<button class="btn btn-success" ng-click="down()">down</button>
</div>
CSS
.slide-up.ng-enter {
animation: slideInDown 1s;
-webkit-animation: slideInDown 1s;
}
.slide-up.ng-leave {
animation: slideOutDown 1s;
-webkit-animation: slideOutDown 1s;
}
.slide-down.ng-enter {
animation: slideInUp 1s;
-webkit-animation: slideInUp 1s;
}
.slide-down.ng-leave {
animation: slideOutUp 1s;
-webkit-animation: slideOutUp 1s;
}
JS
angular.module('myApp', ['ngAnimate'])
.controller('ItemCtrl', function($scope) {
$scope.items = [1,2,3,4,5];
$scope.up = function() {
$scope.slide='up';
$scope.items.splice($scope.items.length-1, 1);
$scope.items.unshift($scope.items[0]-1);
}
$scope.down = function() {
$scope.slide='down';
$scope.items.splice(0, 1);
$scope.items.push($scope.items[$scope.items.length-1]+1);
}
});
The list item that's getting removed is still taking up space until animation is done, that doesn't look too good. Any advice on how I should approach this? Is there any better way for animating list items in Angular?
Thanks in advance!