Skip to content

Commit 7abe64c

Browse files
bennadelbennadel
committed
Add staggering demo.
1 parent ec85600 commit 7abe64c

File tree

2 files changed

+179
-0
lines changed

2 files changed

+179
-0
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Staggering ngRepeat Animations In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/ng-repeat-stagger-animation-angularjs/)
1314
* [Watching A Collection Of Expressions Using Scope.$watchGroup() In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/watch-group-angularjs/)
1415
* [Stateless Filters Don't Apply To Objects, Arrays, or ngRepeat In AngularJS 1.3](http://bennadel.github.io/JavaScript-Demos/demos/stateless-filters-angularjs-1.3/)
1516
* [Preventing Animation During The Initial Render Of ngRepeat In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/initial-ng-repeat-animation-angularjs/)

‎demos/ng-repeat-stagger-animation-angularjs/index.htm

+178
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<!doctype html>
2+
<html ng-app="Demo">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Staggering ngRepeat Animations In AngularJS
8+
</title>
9+
10+
<style type="text/css">
11+
12+
a[ ng-click ] {
13+
color: red ;
14+
cursor: pointer ;
15+
text-decoration: underline ;
16+
user-select: none ;
17+
-moz-user-select: none ;
18+
-webkit-user-select: none ;
19+
}
20+
21+
li.friend.ng-enter {
22+
opacity: 0.2 ;
23+
padding-left: 30px ;
24+
transition: all ease 250ms ;
25+
}
26+
27+
li.friend.ng-enter-stagger {
28+
transition-delay: 0.1s ;
29+
-webkit-transition-delay: 0.1s ;
30+
31+
/*
32+
FROM THE DOCUMENTATION:
33+
In case the stagger doesn't work then these two values must be set
34+
to 0 to avoid an accidental CSS inheritance.
35+
*/
36+
transition-duration: 0s ;
37+
-webkit-transition-duration: 0s ;
38+
}
39+
40+
li.friend.ng-enter-active {
41+
opacity: 1.0 ;
42+
padding-left: 0px ;
43+
}
44+
45+
</style>
46+
</head>
47+
<body ng-controller="AppController">
48+
49+
<h1>
50+
Staggering ngRepeat Animations In AngularJS
51+
</h1>
52+
53+
<h2>
54+
Friends
55+
</h2>
56+
57+
<p>
58+
<a ng-click="addFriends()">Add Friends</a>
59+
&ndash;
60+
<a ng-click="resetFriends()">Reset Friends</a>
61+
</p>
62+
63+
<ul>
64+
<!--
65+
We are going to be animating the LI elements on to the page with a slight
66+
delay to create a staggering effect. This will only affect the "subsequent"
67+
additions since the initial page render will block the initial ngRepeat
68+
animation during linking.
69+
--
70+
NOTE: Normally, I would avoid any filters (orderBy) on the ngRepeat. But, I
71+
am using it here simply to make the demo a bit more interesting, visually.
72+
-->
73+
<li
74+
ng-repeat="friend in friends | orderBy:'name' track by friend.id"
75+
class="friend">
76+
77+
{{ friend.name }}
78+
79+
</li>
80+
</ul>
81+
82+
83+
<!-- Load scripts. -->
84+
<script type="text/javascript" src="../../vendor/angularjs/angular-1.3.8.min.js"></script>
85+
<script type="text/javascript" src="../../vendor/angularjs/angular-animate-1.3.8.min.js"></script>
86+
<script type="text/javascript">
87+
88+
// Create an application module for our demo.
89+
var app = angular.module( "Demo", [ "ngAnimate" ] );
90+
91+
92+
// -------------------------------------------------- //
93+
// -------------------------------------------------- //
94+
95+
96+
// I control the root of the application.
97+
app.controller(
98+
"AppController",
99+
function( $scope ) {
100+
101+
// I hold the collection of friends to render.
102+
$scope.friends = loadFriends();
103+
104+
// Some possible names for the demo.
105+
var names = [
106+
"Olivia", "Ava", "Isabella", "Mia", "Lily", "Madelyn", "Madison",
107+
"Chloe", "Charlotte", "Aubrey", "Leah", "Abigail", "Kaylee",
108+
"Layla", "Harper", "Ella", "Amelia", "Arianna", "Riley", "Aria",
109+
"Hailey", "Hannah", "Maria", "Evelyn", "Addison", "Mackenzie"
110+
];
111+
112+
113+
// ---
114+
// PUBLIC METHODS.
115+
// ---
116+
117+
118+
// I add three more friends to the rendered list.
119+
$scope.addFriends = function() {
120+
121+
var i = 3;
122+
123+
while ( i-- && names.length ) {
124+
125+
$scope.friends.push({
126+
id: ( $scope.friends.length + 1 ),
127+
name: names.shift()
128+
});
129+
130+
}
131+
132+
};
133+
134+
135+
// I reset the list of friends to the original set.
136+
$scope.resetFriends = function() {
137+
138+
$scope.friends = loadFriends();
139+
140+
};
141+
142+
143+
// ---
144+
// PRIVATE METHODS.
145+
// ---
146+
147+
148+
// I build (and return) the original list of friends.
149+
function loadFriends() {
150+
151+
return([
152+
{
153+
id: 1,
154+
name: "Kim"
155+
},
156+
{
157+
id: 2,
158+
name: "Heather"
159+
},
160+
{
161+
id: 3,
162+
name: "Tara"
163+
},
164+
{
165+
id: 4,
166+
name: "Anna"
167+
}
168+
]);
169+
170+
}
171+
172+
}
173+
);
174+
175+
</script>
176+
177+
</body>
178+
</html>

0 commit comments

Comments
 (0)