Skip to content

Commit fb0deab

Browse files
petebacondarwinpetebacondarwin
committed
step-12 animations
1 parent 0b5bb30 commit fb0deab

10 files changed

+189
-8
lines changed

‎app/css/animations.css

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/*
2+
* animations css stylesheet
3+
*/
4+
5+
/* animate ngRepeat in phone listing */
6+
7+
.phone-listing.ng-enter,
8+
.phone-listing.ng-leave,
9+
.phone-listing.ng-move {
10+
-webkit-transition: 0.5s linear all;
11+
-moz-transition: 0.5s linear all;
12+
-o-transition: 0.5s linear all;
13+
transition: 0.5s linear all;
14+
}
15+
16+
.phone-listing.ng-enter,
17+
.phone-listing.ng-move {
18+
opacity: 0;
19+
height: 0;
20+
overflow: hidden;
21+
}
22+
23+
.phone-listing.ng-move.ng-move-active,
24+
.phone-listing.ng-enter.ng-enter-active {
25+
opacity: 1;
26+
height: 120px;
27+
}
28+
29+
.phone-listing.ng-leave {
30+
opacity: 1;
31+
overflow: hidden;
32+
}
33+
34+
.phone-listing.ng-leave.ng-leave-active {
35+
opacity: 0;
36+
height: 0;
37+
padding-top: 0;
38+
padding-bottom: 0;
39+
}
40+
41+
/* cross fading between routes with ngView */
42+
43+
.view-container {
44+
position: relative;
45+
}
46+
47+
.view-frame.ng-enter,
48+
.view-frame.ng-leave {
49+
background: white;
50+
position: absolute;
51+
top: 0;
52+
left: 0;
53+
right: 0;
54+
}
55+
56+
.view-frame.ng-enter {
57+
-webkit-animation: 0.5s fade-in;
58+
-moz-animation: 0.5s fade-in;
59+
-o-animation: 0.5s fade-in;
60+
animation: 0.5s fade-in;
61+
z-index: 100;
62+
}
63+
64+
.view-frame.ng-leave {
65+
-webkit-animation: 0.5s fade-out;
66+
-moz-animation: 0.5s fade-out;
67+
-o-animation: 0.5s fade-out;
68+
animation: 0.5s fade-out;
69+
z-index: 99;
70+
}
71+
72+
@keyframes fade-in {
73+
from { opacity: 0; }
74+
to { opacity: 1; }
75+
}
76+
@-moz-keyframes fade-in {
77+
from { opacity: 0; }
78+
to { opacity: 1; }
79+
}
80+
@-webkit-keyframes fade-in {
81+
from { opacity: 0; }
82+
to { opacity: 1; }
83+
}
84+
85+
@keyframes fade-out {
86+
from { opacity: 1; }
87+
to { opacity: 0; }
88+
}
89+
@-moz-keyframes fade-out {
90+
from { opacity: 1; }
91+
to { opacity: 0; }
92+
}
93+
@-webkit-keyframes fade-out {
94+
from { opacity: 1; }
95+
to { opacity: 0; }
96+
}
97+

‎app/css/app.css

+16-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,16 @@ body {
44
padding-top: 20px;
55
}
66

7+
8+
.phone-images {
9+
background-color: white;
10+
width: 450px;
11+
height: 450px;
12+
overflow: hidden;
13+
position: relative;
14+
float: left;
15+
}
16+
717
.phones {
818
list-style: none;
919
}
@@ -25,15 +35,20 @@ body {
2535
/** Detail View **/
2636
img.phone {
2737
float: left;
28-
border: 1px solid black;
2938
margin-right: 3em;
3039
margin-bottom: 2em;
3140
background-color: white;
3241
padding: 2em;
3342
height: 400px;
3443
width: 400px;
44+
display: none;
45+
}
46+
47+
img.phone:first-child {
48+
display: block;
3549
}
3650

51+
3752
ul.phone-thumbs {
3853
margin: 0;
3954
list-style: none;

‎app/index.html

+8-1
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,24 @@
55
<title>Google Phone Gallery</title>
66
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
77
<link rel="stylesheet" href="css/app.css">
8+
<link rel="stylesheet" href="css/animations.css">
9+
10+
<script src="bower_components/jquery/dist/jquery.js"></script>
811
<script src="bower_components/angular/angular.js"></script>
12+
<script src="bower_components/angular-animate/angular-animate.js"></script>
913
<script src="bower_components/angular-route/angular-route.js"></script>
1014
<script src="bower_components/angular-resource/angular-resource.js"></script>
1115
<script src="js/app.js"></script>
16+
<script src="js/animations.js"></script>
1217
<script src="js/controllers.js"></script>
1318
<script src="js/filters.js"></script>
1419
<script src="js/services.js"></script>
1520
</head>
1621
<body>
1722

18-
<div ng-view></div>
23+
<div class="view-container">
24+
<div ng-view class="view-frame"></div>
25+
</div>
1926

2027
</body>
2128
</html>

‎app/js/animations.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
var phonecatAnimations = angular.module('phonecatAnimations', ['ngAnimate']);
2+
3+
phonecatAnimations.animation('.phone', function() {
4+
5+
var animateUp = function(element, className, done) {
6+
if(className != 'active') {
7+
return;
8+
}
9+
element.css({
10+
position: 'absolute',
11+
top: 500,
12+
left: 0,
13+
display: 'block'
14+
});
15+
16+
jQuery(element).animate({
17+
top: 0
18+
}, done);
19+
20+
return function(cancel) {
21+
if(cancel) {
22+
element.stop();
23+
}
24+
};
25+
}
26+
27+
var animateDown = function(element, className, done) {
28+
if(className != 'active') {
29+
return;
30+
}
31+
element.css({
32+
position: 'absolute',
33+
left: 0,
34+
top: 0
35+
});
36+
37+
jQuery(element).animate({
38+
top: -500
39+
}, done);
40+
41+
return function(cancel) {
42+
if(cancel) {
43+
element.stop();
44+
}
45+
};
46+
}
47+
48+
return {
49+
addClass: animateUp,
50+
removeClass: animateDown
51+
};
52+
});

‎app/js/app.js

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44

55
var phonecatApp = angular.module('phonecatApp', [
66
'ngRoute',
7+
'phonecatAnimations',
8+
79
'phonecatControllers',
810
'phonecatFilters',
911
'phonecatServices'

‎app/partials/phone-detail.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
<img ng-src="{{mainImageUrl}}" class="phone">
1+
<div class="phone-images">
2+
<img ng-src="{{img}}"
3+
class="phone"
4+
ng-repeat="img in phone.images"
5+
ng-class="{active: mainImageUrl==img}">
6+
</div>
27

38
<h1>{{phone.name}}</h1>
49

‎app/partials/phone-list.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
<!--Body content-->
1616

1717
<ul class="phones">
18-
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
18+
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp"
19+
class="thumbnail phone-listing">
1920
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
2021
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
2122
<p>{{phone.snippet}}</p>

‎bower.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"jquery": "~2.1.1",
1212
"bootstrap": "~3.1.1",
1313
"angular-route": "1.3.x",
14-
"angular-resource": "1.3.x"
14+
"angular-resource": "1.3.x",
15+
"angular-animate": "1.3.x"
1516
}
1617
}

‎test/e2e/scenarios.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -86,16 +86,16 @@ describe('PhoneCat App', function() {
8686

8787

8888
it('should display the first phone image as the main phone image', function() {
89-
expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
89+
expect(element(by.css('img.phone.active')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
9090
});
9191

9292

9393
it('should swap main image if a thumbnail image is clicked on', function() {
9494
element(by.css('.phone-thumbs li:nth-child(3) img')).click();
95-
expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
95+
expect(element(by.css('img.phone.active')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
9696

9797
element(by.css('.phone-thumbs li:nth-child(1) img')).click();
98-
expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
98+
expect(element(by.css('img.phone.active')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
9999
});
100100
});
101101
});

‎test/karma.conf.js

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ module.exports = function(config){
77
'app/bower_components/angular/angular.js',
88
'app/bower_components/angular-route/angular-route.js',
99
'app/bower_components/angular-resource/angular-resource.js',
10+
'app/bower_components/angular-animate/angular-animate.js',
1011
'app/bower_components/angular-mocks/angular-mocks.js',
1112
'app/js/**/*.js',
1213
'test/unit/**/*.js'

0 commit comments

Comments
 (0)