CODEWITHSUNDEEP
angularjs
Ricc
Ricc

Reputation: 341

ng animate doesnt work Angular

Try to add animation enter leave and move effect in my ng-repeat but it doesn't work any hints?

Script:

<script>
  angular.module('lipapp', ["ngAnimate"]).controller('lipapp_Module_Control', function ($scope, $http, $window) {
      $scope.CompaignBasket = []; 
      $scope.InitialCompaignBasket = function (){
       .....Raw Data
      }
  }

CSS3

.animate-enter, 
.animate-leave
{  
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
} 

.animate-enter { 
    -webkit-transition: 1s linear all; /* Chrome */ 
    transition: 1s linear all; 
    opacity: 0;
} 

.animate-enter , .animate-enter-active { 
    opacity: 1; 
}

HTML(Using a nested ng-repeat):

  <tr ng-repeat="item in CompaignBasket|filter:Keyword | orderBy:predicate:reverse" ng-animate="'animate'">
                    <td>{{item.Date}}</td>
                    <td>{{item.Donor}}</td>
                    <td>{{item.City}}</td>
                    <td>{{item.State}}</td>
                    <td ng-repeat="cause_item in item.DonorCauseAmount track by $index"><div ng-show="cause_item != 0">${{cause_item | number:0}}</div></td>
                    <td>${{item.Total|number :0}}</td>
                </tr>

Let me know if you find anything that is missing to trigger the effect Thanks!

Upvotes: 0

Views: 235

Answers (1)

sylwester
sylwester

Reputation: 16498

I'm not sure which version of Angular are you using but with Angular v1.2.. you can do that in way like below.

var app = angular.module('lipapp', ["ngAnimate"])

app.controller('MainCtrl', function($scope, $http, $window) {
  $scope.CompaignBasket = [];
  $scope.InitialCompaignBasket = function() {

    var i = {
      Date: 1,
      Donor: "Mike",
      City: "London",
      State: "KK"
    };
    var j = {
      Date: 1,
      Donor: "Tyson",
      City: "New York",
      State: "KK"
    };
    var k = {
      Date: 1,
      Donor: "Terek",
      City: "Manchester",
      State: "KK"
    };
    $scope.CompaignBasket.push(i);
    $scope.CompaignBasket.push(j);
    $scope.CompaignBasket.push(k);

  }

  $scope.InitialCompaignBasket();
});
.animate.ng-enter,


.animate.ng-leave {


  -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;


  -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;


  -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;


  -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;


  transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;


  position: relative;


  text-overflow: clip;


  white-space: nowrap;


}


.animate.ng-leave.animate.ng-leave-active,


.animate.ng-enter {


  -webkit-transition: 1s linear all;


  /* Chrome */


  transition: 1s linear all;


  opacity: 0;


}


.animate.ng-enter.ng-enter-active,


.animate.ng-leave {


  opacity: 1;


}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.min.js"></script>


<body ng-app="lipapp">
  <div ng-controller="MainCtrl">
    <input type="text" ng-model="Keyword" />
    <table>
      <tr class="animate" ng-repeat="item in CompaignBasket|filter:Keyword | orderBy:predicate:reverse">
        <td>{{item.Date}}</td>
        <td>{{item.Donor}}</td>
        <td>{{item.City}}</td>
        <td>{{item.State}}</td>
        <td ng-repeat="cause_item in item.DonorCauseAmount track by $index">
          <div ng-show="cause_item != 0">${{cause_item | number:0}}</div>
        </td>
        <td>${{item.Total|number :0}}</td>
      </tr>
    </table>
  </div>


</body>

Upvotes: 1

Related Questions