1

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.

code

plunkr.co

html 

  <head>
    <link rel="stylesheet" href="https://bootswatch.com/lumen/bootstrap.min.css">
    <link rel="stylesheet" href="style.css"/>
    <script src="https://code.angularjs.org/1.5.0-rc.0/angular.js"></script>
    <script src="https://raw.githubusercontent.com/angular/bower-angular-animate/master/angular-animate.min.js"></script>

    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="Controller">
    <input type="button" value='click' ng-click="addItem()"/>
    <input type="button" value="delete" ng-click="deleteItem()"/>
    <input type="text" ng-model="filterText"/>
    <table class="table table-striped table-hover center-table">
      <tr class="fade" ng-repeat="item in (filtered=(items | filter:filterText))">
        <td>{{item.name}}</td>
      </tr>
    </table>
    </div>
  </body>

</html>

js

    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);
  }
});

css

.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;
Koten
  • 599
  • 2
  • 5
  • 13

1 Answers1

2

Change the name of fade animation to something else (e.g. fade1) and change opacity in .fade1.ng-enter to 0.

.fade1.ng-enter {
   transition: 2s linear all;
    background-color: lightgreen;
    opacity: 0;
}

.fade1.ng-enter.ng-enter-active {
    background-color: #f3f3f3;
    opacity: 1;
}

.fade1.ng-leave {
    transition: 1s linear all;
    background-color: #FF6F79;
    opacity: 1;
}

.fade1.ng-leave.ng-leave-active {
    opacity: 0;
}
Sim
  • 375
  • 2
  • 12
  • btw. that link to angular-animate is broken in my browser so I used https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-animate.min.js – Sim Dec 18 '15 at 18:11
  • Thanks it worked partially, only the second item each time is fading – Koten Dec 18 '15 at 18:12
  • Remove table-striped class from table, maybe that is confusing you? – Sim Dec 18 '15 at 18:21
  • I want it to be stripped, why there is no green fade in the 1st/3rd etc.. columns – Koten Dec 18 '15 at 19:21
  • Because of the table-striped class (if you remove it you get green fade), you will have to play a little more with animations to get that working as you like it! – Sim Dec 18 '15 at 19:23