ng animate doesnt work Angular

Question

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!

sylwester · Accepted Answer · 2014-10-31 22:10:23Z

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>

@sylwerster Nice solution and what if I want when I delete an element there is animation that make the rest of element move slowly to fill up the deleted elements position? Right now only the deleted element has animation from opacity 1 -> 0...Is it done by ng-move

Collectives™ on Stack Overflow

ng animate doesnt work Angular

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related