title: How to animate a slided list (up / down) in Angular/Twitter-bootstrap?
body: <p>Help your internet buddy out, will ya! :)</p>
  
  <p>I'm trying to make a smooth sliding up&amp;down list in angular but I just can't figure it out. I'm not too experience with CSS and I'm still learning but I gave it my best shot: <a href="http://codepen.io/anon/pen/MmyeXb" rel="nofollow noreferrer">http://codepen.io/anon/pen/MmyeXb</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="text-center" ng-app="myApp" ng-controller="ItemCtrl"&gt;
  
    &lt;!-- button up --&gt;
    &lt;button class="btn btn-success" ng-click="up()"&gt;up&lt;/button&gt;
  
    &lt;div style="width: 25%;margin-left: 37%" class="bg-info p-3 container"&gt;
      &lt;ul class="list-group"&gt;
  
        &lt;!-- list item to be animated --&gt;
        &lt;li class="list-group-item m-1" ng-class="slide=='up' ? 'slide-up':'slide-down '" ng-repeat="item in items"&gt;
          {{item}}
        &lt;/li&gt;
  
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;!-- button down --&gt;
  &lt;button class="btn btn-success" ng-click="down()"&gt;down&lt;/button&gt;  
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
  
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>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);
    }
  });
  </code></pre>
  
  <p>The list item that's getting removed is still taking up space until animation is done, that doesn't look too good. Any advices on how I should approach this? Is there any better way for animating list items in angular?</p>
  
  <p>Thanks in advance!</p>