Skip to content

Commit 89253d0

Browse files
dweber019dweber019
committed
Merge branch 'feature/navigation-animation' into develop
2 parents 5f4eb4d + 32af2c2 commit 89253d0

File tree

6 files changed

+181
-180
lines changed

6 files changed

+181
-180
lines changed

‎src/app/app.vm.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<nav-bar router.bind="router"></nav-bar>
44

55
<div class="page-host">
6-
<router-view></router-view>
6+
<router-view swap-order="after"></router-view>
77
</div>
88

99
</template>

‎src/app/main.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export async function configure(aurelia: Aurelia): Promise<void> {
7979
*/
8080
.plugin('aurelia-validation')
8181
// Uncomment the line below to enable animation.
82-
// .plugin('aurelia-animator-css');
82+
.plugin('aurelia-animator-css')
8383
// if the css animator is enabled, add swap-order="after" to all router-view elements
8484

8585
// Anyone wanting to use HTMLImports to load views, will need to install the following plugin.

‎src/app/modules/users/users.vm.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<template>
2-
32
<section class="au-animate">
43
<h2>${heading}</h2>
54
<div class="row au-stagger">

‎src/scss/_aurelia.scss‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
/**
2+
* Base styles
3+
* TODO Move to the app structure
4+
*/
5+
.splash {
6+
text-align: center;
7+
margin: 10% 0 0 0;
8+
box-sizing: border-box;
9+
}
10+
11+
.splash .message {
12+
font-size: 72px;
13+
line-height: 72px;
14+
text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px;
15+
text-transform: uppercase;
16+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
17+
}
18+
19+
.splash .fa-spinner {
20+
text-align: center;
21+
display: inline-block;
22+
font-size: 72px;
23+
margin-top: 50px;
24+
}
25+
26+
.page-host {
27+
position: absolute;
28+
left: 0;
29+
right: 0;
30+
top: 50px;
31+
bottom: 0;
32+
overflow-x: hidden;
33+
overflow-y: auto;
34+
}
35+
36+
@media print {
37+
.page-host {
38+
position: absolute;
39+
left: 10px;
40+
right: 0;
41+
top: 50px;
42+
bottom: 0;
43+
overflow-y: inherit;
44+
overflow-x: inherit;
45+
}
46+
}
47+
48+
section {
49+
margin: 0 20px;
50+
}
51+
52+
.navbar-nav li.loader {
53+
margin: 12px 24px 0 6px;
54+
}
55+
56+
.pictureDetail {
57+
max-width: 425px;
58+
}
59+
60+
/* animate page transitions */
61+
section.au-enter-active {
62+
-webkit-animation: fadeIn 0.5s;
63+
animation: fadeIn 0.5s;
64+
}
65+
section.au-leave-active {
66+
-webkit-animation: fadeOut 0.5s;
67+
animation: fadeOut 0.5s;
68+
}
69+
70+
div.au-stagger {
71+
/* 50ms will be applied between each successive enter operation */
72+
-webkit-animation-delay: 50ms;
73+
animation-delay: 50ms;
74+
}
75+
76+
.card-container.au-enter {
77+
opacity: 0 !important;
78+
}
79+
80+
.card-container.au-enter-active {
81+
-webkit-animation: fadeIn 2s;
82+
animation: fadeIn 2s;
83+
}
84+
85+
.card {
86+
overflow: hidden;
87+
position: relative;
88+
border: 1px solid #CCC;
89+
border-radius: 8px;
90+
text-align: center;
91+
padding: 0;
92+
background-color: #337ab7;
93+
color: rgb(136, 172, 217);
94+
margin-bottom: 32px;
95+
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
96+
}
97+
98+
.card .content {
99+
margin-top: 10px;
100+
}
101+
102+
.card .content .name {
103+
color: white;
104+
text-shadow: 0 0 6px rgba(0, 0, 0, .5);
105+
font-size: 18px;
106+
}
107+
108+
.card .header-bg {
109+
/* This stretches the canvas across the entire hero unit */
110+
position: absolute;
111+
top: 0;
112+
left: 0;
113+
width: 100%;
114+
height: 70px;
115+
border-bottom: 1px #FFF solid;
116+
border-radius: 6px 6px 0 0;
117+
}
118+
119+
.card .avatar {
120+
position: relative;
121+
margin-top: 15px;
122+
z-index: 100;
123+
}
124+
125+
.card .avatar img {
126+
width: 100px;
127+
height: 100px;
128+
-webkit-border-radius: 50%;
129+
-moz-border-radius: 50%;
130+
border-radius: 50%;
131+
border: 2px #FFF solid;
132+
}
133+
134+
/* animation definitions */
135+
@keyframes fadeInRight {
136+
0% {
137+
opacity: 0;
138+
-webkit-transform: translate3d(100%, 0, 0);
139+
-ms-transform: translate3d(100%, 0, 0);
140+
transform: translate3d(100%, 0, 0)
141+
}
142+
100% {
143+
opacity: 1;
144+
-webkit-transform: none;
145+
-ms-transform: none;
146+
transform: none
147+
}
148+
}
149+
150+
@keyframes fadeIn {
151+
0% {
152+
opacity: 0;
153+
}
154+
100% {
155+
opacity: 1;
156+
}
157+
}
158+
159+
@keyframes fadeOut {
160+
0% {
161+
opacity: 1;
162+
}
163+
100% {
164+
opacity: 0;
165+
}
166+
}
167+
168+
// Use swap-order "with"
169+
@keyframes slideRightIn {
170+
0% {
171+
transform: translate(-100%, 0);
172+
}
173+
100% {
174+
transform: translate(0, 0);
175+
}
176+
}

‎src/scss/main.scss‎

Lines changed: 1 addition & 176 deletions
Original file line numberDiff line numberDiff line change
@@ -14,179 +14,4 @@
1414
* Base styles
1515
*/
1616
@import 'base';
17-
18-
/**
19-
* Base styles
20-
* TODO Move to the app structure
21-
*/
22-
.splash {
23-
text-align: center;
24-
margin: 10% 0 0 0;
25-
box-sizing: border-box;
26-
}
27-
28-
.splash .message {
29-
font-size: 72px;
30-
line-height: 72px;
31-
text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px;
32-
text-transform: uppercase;
33-
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
34-
}
35-
36-
.splash .fa-spinner {
37-
text-align: center;
38-
display: inline-block;
39-
font-size: 72px;
40-
margin-top: 50px;
41-
}
42-
43-
.page-host {
44-
position: absolute;
45-
left: 0;
46-
right: 0;
47-
top: 50px;
48-
bottom: 0;
49-
overflow-x: hidden;
50-
overflow-y: auto;
51-
}
52-
53-
@media print {
54-
.page-host {
55-
position: absolute;
56-
left: 10px;
57-
right: 0;
58-
top: 50px;
59-
bottom: 0;
60-
overflow-y: inherit;
61-
overflow-x: inherit;
62-
}
63-
}
64-
65-
section {
66-
margin: 0 20px;
67-
}
68-
69-
.navbar-nav li.loader {
70-
margin: 12px 24px 0 6px;
71-
}
72-
73-
.pictureDetail {
74-
max-width: 425px;
75-
}
76-
77-
/* animate page transitions */
78-
section.au-enter-active {
79-
-webkit-animation: fadeInRight 1s;
80-
animation: fadeInRight 1s;
81-
}
82-
83-
div.au-stagger {
84-
/* 50ms will be applied between each successive enter operation */
85-
-webkit-animation-delay: 50ms;
86-
animation-delay: 50ms;
87-
}
88-
89-
.card-container.au-enter {
90-
opacity: 0 !important;
91-
}
92-
93-
.card-container.au-enter-active {
94-
-webkit-animation: fadeIn 2s;
95-
animation: fadeIn 2s;
96-
}
97-
98-
.card {
99-
overflow: hidden;
100-
position: relative;
101-
border: 1px solid #CCC;
102-
border-radius: 8px;
103-
text-align: center;
104-
padding: 0;
105-
background-color: #337ab7;
106-
color: rgb(136, 172, 217);
107-
margin-bottom: 32px;
108-
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
109-
}
110-
111-
.card .content {
112-
margin-top: 10px;
113-
}
114-
115-
.card .content .name {
116-
color: white;
117-
text-shadow: 0 0 6px rgba(0, 0, 0, .5);
118-
font-size: 18px;
119-
}
120-
121-
.card .header-bg {
122-
/* This stretches the canvas across the entire hero unit */
123-
position: absolute;
124-
top: 0;
125-
left: 0;
126-
width: 100%;
127-
height: 70px;
128-
border-bottom: 1px #FFF solid;
129-
border-radius: 6px 6px 0 0;
130-
}
131-
132-
.card .avatar {
133-
position: relative;
134-
margin-top: 15px;
135-
z-index: 100;
136-
}
137-
138-
.card .avatar img {
139-
width: 100px;
140-
height: 100px;
141-
-webkit-border-radius: 50%;
142-
-moz-border-radius: 50%;
143-
border-radius: 50%;
144-
border: 2px #FFF solid;
145-
}
146-
147-
/* animation definitions */
148-
@-webkit-keyframes fadeInRight {
149-
0% {
150-
opacity: 0;
151-
-webkit-transform: translate3d(100%, 0, 0);
152-
transform: translate3d(100%, 0, 0)
153-
}
154-
100% {
155-
opacity: 1;
156-
-webkit-transform: none;
157-
transform: none
158-
}
159-
}
160-
161-
@keyframes fadeInRight {
162-
0% {
163-
opacity: 0;
164-
-webkit-transform: translate3d(100%, 0, 0);
165-
-ms-transform: translate3d(100%, 0, 0);
166-
transform: translate3d(100%, 0, 0)
167-
}
168-
100% {
169-
opacity: 1;
170-
-webkit-transform: none;
171-
-ms-transform: none;
172-
transform: none
173-
}
174-
}
175-
176-
@-webkit-keyframes fadeIn {
177-
0% {
178-
opacity: 0;
179-
}
180-
100% {
181-
opacity: 1;
182-
}
183-
}
184-
185-
@keyframes fadeIn {
186-
0% {
187-
opacity: 0;
188-
}
189-
100% {
190-
opacity: 1;
191-
}
192-
}
17+
@import 'aurelia';

‎webpack.config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@ module.exports = function (envArguments) {
8383
'aurelia-templating-binding',
8484
'aurelia-templating-router',
8585
'aurelia-templating-resources',
86-
'aurelia-validation'
86+
'aurelia-validation',
87+
'aurelia-animator-css'
8788
],
8889
theme: [
8990
'bootstrap-sass'

0 commit comments

Comments
 (0)