title: Adding slide animation to ng-repeat
body: <p>In my code I'm trying to create multiple div's which have a hide button in it. On clicking of this button , the respective div should fade away and the div's below it should come to top(i.e. they should fill in the space created by the vanished div through some animation). </p>
  
  <p>Here is my html code: </p>
  
  <pre><code>&lt;body ng-app="task" ng-controller="repeat"&gt;
   &lt;div ng-repeat='x in array' ng-hide="x.show"&gt;
    &lt;p&gt;{{ x.text }}
    &lt;/p&gt;
    &lt;button ng-click="toggle($index)"&gt;Hide&lt;/button&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>My js file contains the following: </p>
  
  <pre><code>var app = angular.module('task');
  app.controller('repeat',function($scope){
   $scope.array = [{
       show: true,
       text:'Sample Text 1'},
      { 
       show: true,
       text:'Sample Text 2'},
      { 
       show: true,
       text:'Sample Text 3'}];
  
   $scope.toggle = function(){
    $scope.array[index].show = false ;
   };
  })
  </code></pre>
  
  <p>And in my css I have the following code:</p>
  
  <pre><code>.ng-hide-add      { animation:1s fade ease; }
  
  @keyframes fade{
    0% {
        opacity: 1;
        }
  
    100% {
          opacity: 0;
         }
   }
  </code></pre>
  
  <p>I have looked at a lot of slider animations that are posted on the net and tried to adapt them to my program but have failed miserably till now.</p>
  
  <p>Can you tell me what code should I add to make the animation possible. Would really appreciate your responses.</p>