Laxmikant Dange Laxmikant Dange - 4 months ago 13
AngularJS Question

New element animation in ng-repeat

I am using ng-repeat with some style and I am going to add new items to the array. This is what I did:



// Code goes here

var _app = angular.module("userApp", [])
_app.controller("usrController", function($scope) {
$scope.usrList = [];
$scope.adduser = function() {
console.log($scope.newUsr)
$scope.usrList.push({
name: $scope.newUsr
})
}
})

/* Styles go here */

.listItem {
border: 1px solid #F00;
background-color: lightgray;
padding: 3px;
border-radius: 5px;
margin: 2px;
width: 100px;
}

<!DOCTYPE html>
<html ng-app="userApp">

<head>
<script data-require="angular.js@1.4.0-rc.2" data-semver="1.4.0-rc.2" src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body>
<div ng-controller="usrController">
<input ng-model="newUsr">
<button ng-click="adduser()">Adduser</button>
<ul>
<li class="listItem" ng-repeat="usr in usrList">{{usr.name}}</li>
</ul>
</div>
</body>

</html>





And I am going to add stackoverflow effect for new elements added. When I add new element, it should fade or any other animation effect like background-color change.


  • How can I do this?

  • I do this with css3 only?

  • Is there any way to add same effect if the already rendered element
    is changed?


Answer

You need to use use ngAnimate module and set up classes for ngRepeat.

First, include the module in the project (remember to include corresponding script tag also):

angular.module("userApp", ['ngAnimate'])

Then define desired transitions/animations. For example:

.listItem.ng-enter {
    opacity: 0;
    transition: all .5s ease;
}
.listItem.ng-enter-active {
    opacity: 1;
}

Demo: http://plnkr.co/edit/2QuyxMt4kiYkKeCoMGCL?p=preview