<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS ngRepeat sample</title>
</head>
<body>
<link href="style.css" rel="stylesheet" />
<div ng-controller="animationsCtrl as ac" class="wrapper">
<h1>ngRepeat/ngIf with keyframes</h1>
<div>ac.fadeAnimation = {{ac.fadeAnimation}}</div>
<div class="wrapper">
<button ng-click="ac.addItem()">Add item</button>
<button ng-click="ac.removeItem()">Remove item</button>
<button ng-click="ac.sortItems()">Sort items</button>
<button ng-click="ac.fadeAnimation = !ac.fadeAnimation">Toggle fade</button>
<div ng-repeat="item in ac.items" class="fadeStyle">
{{item.name}}
</div>
<div ng-if="ac.fadeAnimation" class="fadeStyle">
[ng-if]This element fades in when the fadeAnimation model is true
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
<script>
var app = angular.module('myApp', ['ngAnimate']);
app.controller('animationsCtrl', [
function() {
var self = this;
self.items = [{
name: 'Richard'
}, {
name: 'Bruno'
}, {
name: 'Jobson'
}];
self.counter = 0;
self.fadeAnimation = true;
self.addItem = function() {
var name = 'Item' + self.counter++;
self.items.push({
name: name
});
};
self.removeItem = function() {
var length = self.items.length;
var indexRemoved = Math.floor(Math.random() * length);
self.items.splice(indexRemoved, 1);
};
self.sortItems = function() {
self.items.sort(function(a, b) {
return a[name] < b[name] ? -1 : 1
});
};
}
]);
</script>
</body>
</html>
.fadeStyle {
margin: 5px;
}
/* ngRepeat animation*/
/* ngRepeat ng-enter animation */
.fadeStyle.ng-enter {
-webkit-animation: 1s enterKeyframes;
-moz-animation: 1s enterKeyframes;
-ms-animation: 1s enterKeyframes;
-o-animation: 1s enterKeyframes;
animation: 1s enterKeyframes;
}
.fadeStyle.ng-hide-remove {
-webkit-animation: 1s enterKeyframes;
-moz-animation: 1s enterKeyframes;
-ms-animation: 1s enterKeyframes;
-o-animation: 1s enterKeyframes;
animation: 1s enterKeyframes;
}
@-webkit-keyframes enterKeyframes {
from {
opacity: 0;
color: red;
}
to {
opacity: 1;
color: black;
}
}
@-moz-keyframes enterKeyframes {
from {
opacity: 0;
color: red;
}
to {
opacity: 1;
/*color: black;*/
}
}
@keyframes enterKeyframes {
from {
opacity: 0;
color: red;
}
to {
opacity: 1;
color: black;
}
}
/* ngRepeat ng-move animation */
.fadeStyle.ng-move {
-webkit-animation: 1s moveKeyframes;
-moz-animation: 1s moveKeyframes;
-ms-animation: 1s moveKeyframes;
-o-animation: 1s moveKeyframes;
animation: 1s moveKeyframes;
}
@-webkit-keyframes moveKeyframes {
from {
opacity: 1;
color: black;
}
to {
opacity: 0.5;
color: blue;
}
}
@-moz-keyframes moveKeyframes {
from {
opacity: 1;
color: black;
}
to {
opacity: 0.5;
color: blue;
}
}
@keyframes moveKeyframes {
from {
opacity: 1;
color: black;
}
to {
opacity: 0.5;
color: blue;
}
}
/* ngRepeat ng-leave animation */
.fadeStyle.ng-leave {
-webkit-animation: 1s leaveKeyframes;
-moz-animation: 1s leaveKeyframes;
-ms-animation: 1s leaveKeyframes;
-o-animation: 1s leaveKeyframes;
animation: 1s leaveKeyframes;
}
.fadeStyle.ng-hide-add {
-webkit-animation: 1s leaveKeyframes;
-moz-animation: 1s leaveKeyframes;
-ms-animation: 1s leaveKeyframes;
-o-animation: 1s leaveKeyframes;
animation: 1s leaveKeyframes;
}
@-webkit-keyframes leaveKeyframes {
from {
opacity: 1;
color: black;
}
to {
opacity: 0;
color: red;
}
}
@-moz-keyframes leaveKeyframes {
from {
opacity: 1;
/*color: black;*/
}
to {
opacity: 0;
color: red;
}
}
@keyframes leaveKeyframes {
from {
opacity: 1;
color: black;
}
to {
opacity: 0;
color: red;
}
}
.wrapper {
margin: 10px;
}