I am adding simple animation in ng-repeat and its not working. see DEMO. Here is my code of angular:
var m = angular.module('App', []);
m.controller('ExampleCtrl', function($scope) {
$scope.items = [];
var i = 0;
$scope.addItems = function() {
$scope.items.push("test"+i);
i++;
}
});
But its working here: Plunker. Whats wrong with my jsfiddle's code?
your angular version is different than the working plunker, updating the angular version will solve your problem
here is the DEMO
But note that this angular version is too old, and there is a separate angular module for animations in later versions,
with angular 1.4.x
here is a Example with latest way angular version.
include angular and angular-animate js files.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular-animate.js"></script>
and add the angular-animate dependency as,
var m = angular.module('App', ['ngAnimate']);
and use the css classes as,
.div.ng-enter {
opacity:0;
-webkit-transition-duration: 1000ms;
}
.div.ng-enter-active {
-webkit-transform:scale(1);
opacity:1;
}
Serveral issues.
ngAngular is not a directive - it is a module
load the angular-animate.js and define the dependency in your moduel
your css selectors do not match the angular naming
see ngAnimat classname.ng-enter / classname.ng-leave
var m = angular.module('App', ['ngAnimate']);
m.controller('ExampleCtrl', function($scope) {
$scope.items = [];
var i = 0;
$scope.addItems = function() {
$scope.items.push("test" + i);
i++;
}
});.insert.ng-enter {
opacity:0;
-webkit-transition-duration: 1000ms;
}
.insert.ng-enter.insert.ng-enter-active {
-webkit-transform:scale(1);
opacity:1;
}
.div{
width:300px;
padding:30px;
background:#ccc;
margin:5px;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-animate.min.js"></script>
<div ng-controller="ExampleCtrl" ng-app='App' class="list">
<button ng-click="addItems()">Add Items</button>
<div class="div insert" ng-repeat="item in items">
{{item}}
</div>
</div>
