Skip to content

Commit 8f94f7e

Browse files
AnthonyNahasAnthonyNahas
committed
demo(app): added animations to the demo app
1 parent 05c7aec commit 8f94f7e

File tree

9 files changed

+384
-410
lines changed

9 files changed

+384
-410
lines changed

‎demo/package-lock.json

Lines changed: 287 additions & 387 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/package.json

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,16 @@
1818
},
1919
"private": true,
2020
"dependencies": {
21-
"@angular/animations": "^6.1.1",
22-
"@angular/common": "^6.1.1",
23-
"@angular/compiler": "^6.1.1",
24-
"@angular/core": "^6.1.1",
25-
"@angular/forms": "^6.1.1",
26-
"@angular/http": "^6.1.1",
27-
"@angular/platform-browser": "^6.1.1",
28-
"@angular/platform-browser-dynamic": "^6.1.1",
29-
"@angular/platform-server": "^6.1.1",
30-
"@angular/router": "^6.1.1",
21+
"@angular/animations": "^6.1.2",
22+
"@angular/common": "^6.1.2",
23+
"@angular/compiler": "^6.1.2",
24+
"@angular/core": "^6.1.2",
25+
"@angular/forms": "^6.1.2",
26+
"@angular/http": "^6.1.2",
27+
"@angular/platform-browser": "^6.1.2",
28+
"@angular/platform-browser-dynamic": "^6.1.2",
29+
"@angular/platform-server": "^6.1.2",
30+
"@angular/router": "^6.1.2",
3131
"@ng-bootstrap/ng-bootstrap": "^2.2.2",
3232
"@stackblitz/sdk": "^1.2.0",
3333
"bootstrap": "^4.1.3",
@@ -39,19 +39,19 @@
3939
},
4040
"devDependencies": {
4141
"@angular-devkit/build-angular": "~0.6.0",
42-
"@angular/cli": "^6.1.1",
43-
"@angular/compiler-cli": "^6.1.1",
44-
"@angular/language-service": "^6.1.1",
42+
"@angular/cli": "^6.1.3",
43+
"@angular/compiler-cli": "^6.1.2",
44+
"@angular/language-service": "^6.1.2",
4545
"@angularclass/hmr": "~2.1.3",
4646
"@compodoc/gulp-compodoc": "^0.0.9",
4747
"@nguniversal/common": "^6.0.0",
4848
"@nguniversal/express-engine": "^6.0.0",
4949
"@nguniversal/module-map-ngfactory-loader": "^6.0.0",
5050
"@types/jest": "^23.3.1",
51-
"@types/node": "^10.5.6",
51+
"@types/node": "^10.5.8",
5252
"angular-cli-ghpages": "0.5.2",
5353
"ansi-colors": "^2.0.5",
54-
"codelyzer": "^4.4.2",
54+
"codelyzer": "^4.4.3",
5555
"commitplease": "3.2.0",
5656
"conventional-github-releaser": "2.0.2",
5757
"del": "3.0.0",
@@ -65,15 +65,15 @@
6565
"gulp-file": "0.4.0",
6666
"gulp-git": "^2.8.0",
6767
"gulp-hub": "0.8.0",
68-
"jest": "^23.4.2",
68+
"jest": "^23.5.0",
6969
"jest-preset-angular": "^5.2.3",
7070
"lodash": "^4.17.10",
7171
"protractor": "~5.3.0",
7272
"reflect-metadata": "~0.1.10",
7373
"run-sequence": "2.2.1",
74-
"travis-status": "^3.0.0",
74+
"travis-status": "^3.0.1",
7575
"ts-loader": "~4.4.2",
76-
"ts-node": "~7.0.0",
76+
"ts-node": "^7.0.1",
7777
"tslint": "~5.9.1",
7878
"typescript": "~2.7.2",
7979
"webpack-cli": "^3.1.0",

‎demo/src/app/app-routing.module.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,44 @@
11
import {NgModule} from '@angular/core';
22
import {RouterModule, Routes} from '@angular/router';
33

4+
import {sequence, trigger, stagger, animate, style, group, query as q, transition, keyframes, animateChild} from '@angular/animations';
5+
6+
const query = (s, a, o = {optional: true}) => q(s, a, o);
7+
8+
9+
export const routerTransition = trigger('routerTransition', [
10+
transition('* <=> *', [
11+
query(':enter, :leave', style({position: 'fixed', width: '100%'})
12+
, {optional: true}),
13+
query('.block', style({opacity: 0})
14+
, {optional: true}),
15+
group([
16+
query(':enter', [
17+
style({transform: 'translateX(100%)'}),
18+
animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
19+
], {optional: true}),
20+
query(':leave', [
21+
style({transform: 'translateX(0%)'}),
22+
animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
23+
], {optional: true}),
24+
]),
25+
query(':enter .block', stagger(400, [
26+
style({transform: 'translateY(100px)'}),
27+
animate('1s ease-in-out', style({transform: 'translateY(0px)', opacity: 1})),
28+
]), {optional: true}),
29+
])
30+
])
31+
432
const routes: Routes = [
533
{
634
path: '',
735
redirectTo: 'home',
36+
data: {state: 'home'},
837
pathMatch: 'full'
938
},
1039
{
1140
path: 'getting-started',
41+
data: {state: 'getting-started'},
1242
loadChildren: 'app/getting-started/getting-started.module#GettingStartedModule'
1343
}
1444
];

‎demo/src/app/app.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<app-header></app-header>
2-
<div>
3-
<router-outlet></router-outlet>
4-
</div>
2+
<main [@routerTransition]="getState(o)">
3+
<router-outlet #o="outlet"></router-outlet>
4+
</main>
55
<app-footer></app-footer>

‎demo/src/app/app.component.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import {Component, Inject, PLATFORM_ID} from '@angular/core';
22
import {NavigationEnd, Router, RouterEvent} from '@angular/router';
33
import {isPlatformBrowser} from '@angular/common';
44
import {filter} from 'rxjs/operators';
5+
import {routerTransition} from './app-routing.module';
56

67
@Component({
78
selector: 'app-root',
89
templateUrl: './app.component.html',
9-
styleUrls: ['./app.component.scss']
10+
styleUrls: ['./app.component.scss'],
11+
animations: [routerTransition],
1012
})
1113
export class AppComponent {
1214

@@ -20,4 +22,8 @@ export class AppComponent {
2022
}
2123
});
2224
}
25+
26+
getState(outlet) {
27+
return outlet.activatedRouteData.state;
28+
}
2329
}

‎demo/src/app/app.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {AppComponent} from './app.component';
1010
import {NgbAuthFirebaseUIModule} from '@firebaseui/ng-bootstrap';
1111
import {HttpClientModule} from '@angular/common/http';
1212
import {MarkdownModule} from 'ngx-markdown';
13+
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
1314

1415
@NgModule({
1516
declarations: [
@@ -31,6 +32,7 @@ import {MarkdownModule} from 'ngx-markdown';
3132
MarkdownModule.forRoot(),
3233
TransferHttpCacheModule,
3334
FormsModule,
35+
BrowserAnimationsModule,
3436
HttpClientModule,
3537
AppRoutingModule,
3638
AppSharedModule,

‎demo/src/app/home/home.component.ts

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,29 @@
11
import {Component, OnInit} from '@angular/core';
22
import {Title} from '@angular/platform-browser';
33
import sdk from '@stackblitz/sdk';
4+
import {animate, query, stagger, style, transition, trigger} from '@angular/animations';
5+
6+
export const homeTransition = trigger('homeTransition', [
7+
transition(':enter', [
8+
query('.block', style({opacity: 0})),
9+
query('.block', stagger(300, [
10+
style({transform: 'translateY(100px)'}),
11+
animate('1s cubic-bezier(.75,-0.48,.26,1.52)', style({transform: 'translateY(0px)', opacity: 1})),
12+
])),
13+
]),
14+
transition(':leave', [
15+
query('.block', stagger(300, [
16+
style({transform: 'translateY(0px)', opacity: 1}),
17+
animate('1s cubic-bezier(.75,-0.48,.26,1.52)', style({transform: 'translateY(100px)', opacity: 0})),
18+
])),
19+
])
20+
]);
421

522
@Component({
623
selector: 'app-home',
724
templateUrl: './home.component.html',
8-
styleUrls: ['./home.component.scss']
25+
styleUrls: ['./home.component.scss'],
26+
animations: [homeTransition],
927
})
1028
export class HomeComponent implements OnInit {
1129

‎demo/src/app/shared/header/header.component.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
.navbar {
22
background: hsla(0, 0%, 100%, .95)
33
}
4+
5+
.host {
6+
display: block;
7+
}

‎demo/src/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,20 @@
3333
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
3434
<meta http-equiv="x-ua-compatible" content="ie=edge">
3535
<link rel="icon" type="image/x-icon" href="favicon.ico">
36+
37+
<!-- Global site tag (gtag.js) - Google Analytics -->
38+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-114342493-9"></script>
39+
<script>
40+
window.dataLayer = window.dataLayer || [];
41+
42+
function gtag() {
43+
dataLayer.push(arguments);
44+
}
45+
46+
gtag('js', new Date());
47+
48+
gtag('config', 'UA-114342493-9');
49+
</script>
3650
</head>
3751

3852
<body>

0 commit comments

Comments
 (0)