title: AngularJS animate element disappearing
body: <p>in the example below you can see that when item is added to the list it is doing the fade animation and then disappearing, I want it to have bootstrap style after animation, It is probably conflicting with bootstrap css but I can't figure out which css code exactly is doing that.</p>
  
  <p><strong>code</strong></p>
  
  <p><a href="http://plnkr.co/edit/WmaiLTuCiGWWcGygcNqz?p=preview" rel="nofollow">plunkr.co</a></p>
  
  <p><strong>html</strong>
      
      </p>
  
  <pre><code>  &lt;head&gt;
      &lt;link rel="stylesheet" href="https://bootswatch.com/lumen/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="style.css"/&gt;
      &lt;script src="https://code.angularjs.org/1.5.0-rc.0/angular.js"&gt;&lt;/script&gt;
      &lt;script src="https://raw.githubusercontent.com/angular/bower-angular-animate/master/angular-animate.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div ng-controller="Controller"&gt;
      &lt;input type="button" value='click' ng-click="addItem()"/&gt;
      &lt;input type="button" value="delete" ng-click="deleteItem()"/&gt;
      &lt;input type="text" ng-model="filterText"/&gt;
      &lt;table class="table table-striped table-hover center-table"&gt;
        &lt;tr class="fade" ng-repeat="item in (filtered=(items | filter:filterText))"&gt;
          &lt;td&gt;{{item.name}}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>    var app=angular.module('App',['ngAnimate']);
  app.controller('Controller',function($scope){
    $scope.items=[];
  
    $scope.addItem=function(){
      $scope.items.push({'name':'cgagaga'})
    };
    $scope.deleteItem=function(){
      $scope.items.splice(0,1);
    }
  });
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.fade.ng-enter {
      transition: 2s linear all;
      background-color: lightgreen;
      opacity: 1;
  }
  
  /* The finishing CSS styles for the enter animation */
  .fade.ng-enter.ng-enter-active {
      background-color: #f3f3f3;
      opacity: 1;
  }
  
  .fade.ng-leave {
      transition: 1s linear all;
      background-color: #FF6F79;
      opacity: 1;
  }
  
  .fade.ng-leave.ng-leave-active {
      opacity: 0;
  </code></pre>