└── Angular-2-Animations
├── .gitignore
├── app
├── app.component.js
├── app.component.js.map
├── app.component.ts
├── app.module.js
├── app.module.js.map
├── app.module.ts
├── main.js
├── main.js.map
└── main.ts
├── index.html
├── package.json
├── styles.css
├── systemjs.config.js
├── tsconfig.json
└── typings.json
/Angular-2-Animations/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | typings
--------------------------------------------------------------------------------
/Angular-2-Animations/app/app.component.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6 | return c > 3 && r && Object.defineProperty(target, key, r), r;
7 | };
8 | var __metadata = (this && this.__metadata) || function (k, v) {
9 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
10 | };
11 | var core_1 = require('@angular/core');
12 | var AppComponent = (function () {
13 | function AppComponent() {
14 | this.state = 'off';
15 | this.displayState = 'show';
16 | this.showDiv = true;
17 | }
18 | AppComponent.prototype.toggleLights = function () {
19 | this.state = (this.state == "off") ? "on" : "off";
20 | };
21 | AppComponent.prototype.toggleDisplay = function () {
22 | this.displayState = (this.displayState == "hide") ? "show" : "hide";
23 | this.showDiv = this.showDiv ? false : true;
24 | };
25 | AppComponent = __decorate([
26 | core_1.Component({
27 | selector: 'my-app',
28 | template: "
Angular Animations
\n \n \n \n
\n \n Enter/Exit hi\n
\n \n \n ",
29 | animations: [
30 | core_1.trigger('light', [
31 | core_1.state('off', core_1.style({
32 | backgroundColor: 'black'
33 | })),
34 | core_1.state('on', core_1.style({
35 | backgroundColor: '#eee'
36 | })),
37 | core_1.transition('off => on', core_1.animate('2000ms 1s ease-in', core_1.style({ transform: 'rotate(90deg)' }))),
38 | core_1.transition('on => off', core_1.animate('2000ms 1s ease-out', core_1.style({ transform: 'rotate(180deg)' })))
39 | ]),
40 | core_1.trigger('display', [
41 | core_1.state('hide', core_1.style({
42 | opacity: 0
43 | })),
44 | core_1.state('show', core_1.style({
45 | opacity: 1
46 | })),
47 | core_1.transition('hide => show', core_1.animate('2000ms ease-in', core_1.style({ opacity: 0.5 }))),
48 | core_1.transition('show => hide', core_1.animate('2000ms ease-in', core_1.style({ transform: 'scale(0.5)', opacity: 0.5 })))
49 | ]),
50 | core_1.trigger('flyInOut', [
51 | core_1.transition('void => *', [
52 | core_1.style({ transform: 'translateX(-100%)' }),
53 | core_1.animate(2000)
54 | ]),
55 | core_1.transition('* => void', [
56 | core_1.animate(2000, core_1.style({ transform: 'translateX(100%)' }))
57 | ])
58 | ])
59 | ]
60 | }),
61 | __metadata('design:paramtypes', [])
62 | ], AppComponent);
63 | return AppComponent;
64 | }());
65 | exports.AppComponent = AppComponent;
66 | //# sourceMappingURL=app.component.js.map
--------------------------------------------------------------------------------
/Angular-2-Animations/app/app.component.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"app.component.js","sourceRoot":"","sources":["app.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAOO,eAAe,CAAC,CAAA;AA8CvB;IAAA;QACE,UAAK,GAAW,KAAK,CAAC;QACtB,iBAAY,GAAW,MAAM,CAAC;QAC9B,YAAO,GAAY,IAAI,CAAC;IAS1B,CAAC;IAPC,mCAAY,GAAZ;QACE,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC;IACpD,CAAC;IACD,oCAAa,GAAb;QACE,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,IAAI,MAAM,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC;QACpE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAE,KAAK,GAAG,IAAI,CAAC;IAC5C,CAAC;IAxDH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,qYAUT;YACD,UAAU,EAAE;gBACV,cAAO,CAAC,OAAO,EAAE;oBACf,YAAK,CAAC,KAAK,EAAE,YAAK,CAAC;wBACjB,eAAe,EAAE,OAAO;qBACzB,CAAC,CAAC;oBACH,YAAK,CAAC,IAAI,EAAI,YAAK,CAAC;wBAClB,eAAe,EAAE,MAAM;qBACxB,CAAC,CAAC;oBACH,iBAAU,CAAC,WAAW,EAAE,cAAO,CAAC,mBAAmB,EAAE,YAAK,CAAC,EAAC,SAAS,EAAE,eAAe,EAAC,CAAC,CAAC,CAAC;oBAC1F,iBAAU,CAAC,WAAW,EAAE,cAAO,CAAC,oBAAoB,EAAE,YAAK,CAAC,EAAC,SAAS,EAAE,gBAAgB,EAAC,CAAC,CAAC,CAAC;iBAC7F,CAAC;gBACF,cAAO,CAAC,SAAS,EAAE;oBACjB,YAAK,CAAC,MAAM,EAAE,YAAK,CAAC;wBAClB,OAAO,EAAE,CAAC;qBACX,CAAC,CAAC;oBACH,YAAK,CAAC,MAAM,EAAI,YAAK,CAAC;wBACpB,OAAO,EAAE,CAAC;qBACX,CAAC,CAAC;oBACH,iBAAU,CAAC,cAAc,EAAE,cAAO,CAAC,gBAAgB,EAAE,YAAK,CAAC,EAAE,OAAO,EAAE,GAAG,EAAC,CAAC,CAAC,CAAC;oBAC7E,iBAAU,CAAC,cAAc,EAAE,cAAO,CAAC,gBAAgB,EAAE,YAAK,CAAC,EAAC,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,EAAC,CAAC,CAAC,CAAC;iBACtG,CAAC;gBACD,cAAO,CAAC,UAAU,EAAE;oBACrB,iBAAU,CAAC,WAAW,EAAE;wBACtB,YAAK,CAAC,EAAC,SAAS,EAAE,mBAAmB,EAAC,CAAC;wBACvC,cAAO,CAAC,IAAI,CAAC;qBACd,CAAC;oBACF,iBAAU,CAAC,WAAW,EAAE;wBACtB,cAAO,CAAC,IAAI,EAAE,YAAK,CAAC,EAAC,SAAS,EAAE,kBAAkB,EAAC,CAAC,CAAC;qBACtD,CAAC;iBACH,CAAC;aACD;SACF,CAAC;;oBAAA;IAaF,mBAAC;AAAD,CAAC,AAZD,IAYC;AAZY,oBAAY,eAYxB,CAAA"}
--------------------------------------------------------------------------------
/Angular-2-Animations/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | trigger,
4 | state,
5 | style,
6 | transition,
7 | animate
8 | } from '@angular/core';
9 | @Component({
10 | selector: 'my-app',
11 | template: `Angular Animations
12 |
13 |
14 |
15 |
16 |
17 | Enter/Exit hi
18 |
19 |
20 |
21 | `,
22 | animations: [
23 | trigger('light', [
24 | state('off', style({
25 | backgroundColor: 'black'
26 | })),
27 | state('on', style({
28 | backgroundColor: '#eee'
29 | })),
30 | transition('off => on', animate('2000ms 1s ease-in', style({transform: 'rotate(90deg)'}))),
31 | transition('on => off', animate('2000ms 1s ease-out', style({transform: 'rotate(180deg)'})))
32 | ]),
33 | trigger('display', [
34 | state('hide', style({
35 | opacity: 0
36 | })),
37 | state('show', style({
38 | opacity: 1
39 | })),
40 | transition('hide => show', animate('2000ms ease-in', style({ opacity: 0.5}))),
41 | transition('show => hide', animate('2000ms ease-in', style({transform: 'scale(0.5)', opacity: 0.5})))
42 | ]),
43 | trigger('flyInOut', [
44 | transition('void => *', [
45 | style({transform: 'translateX(-100%)'}),
46 | animate(2000)
47 | ]),
48 | transition('* => void', [
49 | animate(2000, style({transform: 'translateX(100%)'}))
50 | ])
51 | ])
52 | ]
53 | })
54 | export class AppComponent {
55 | state: string = 'off';
56 | displayState: string = 'show';
57 | showDiv: boolean = true;
58 |
59 | toggleLights(){
60 | this.state = (this.state == "off") ? "on" : "off";
61 | }
62 | toggleDisplay(){
63 | this.displayState = (this.displayState == "hide") ? "show" : "hide";
64 | this.showDiv = this.showDiv? false : true;
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/Angular-2-Animations/app/app.module.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6 | return c > 3 && r && Object.defineProperty(target, key, r), r;
7 | };
8 | var __metadata = (this && this.__metadata) || function (k, v) {
9 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
10 | };
11 | var core_1 = require('@angular/core');
12 | var platform_browser_1 = require('@angular/platform-browser');
13 | var app_component_1 = require('./app.component');
14 | var AppModule = (function () {
15 | function AppModule() {
16 | }
17 | AppModule = __decorate([
18 | core_1.NgModule({
19 | imports: [platform_browser_1.BrowserModule],
20 | declarations: [app_component_1.AppComponent],
21 | bootstrap: [app_component_1.AppComponent]
22 | }),
23 | __metadata('design:paramtypes', [])
24 | ], AppModule);
25 | return AppModule;
26 | }());
27 | exports.AppModule = AppModule;
28 | //# sourceMappingURL=app.module.js.map
--------------------------------------------------------------------------------
/Angular-2-Animations/app/app.module.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"app.module.js","sourceRoot":"","sources":["app.module.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA8B,eAAe,CAAC,CAAA;AAC9C,iCAA8B,2BAA2B,CAAC,CAAA;AAC1D,8BAA+B,iBAAiB,CAAC,CAAA;AAMjD;IAAA;IAAyB,CAAC;IAL1B;QAAC,eAAQ,CAAC;YACR,OAAO,EAAO,CAAE,gCAAa,CAAE;YAC/B,YAAY,EAAE,CAAE,4BAAY,CAAE;YAC9B,SAAS,EAAK,CAAE,4BAAY,CAAE;SAC/B,CAAC;;iBAAA;IACuB,gBAAC;AAAD,CAAC,AAA1B,IAA0B;AAAb,iBAAS,YAAI,CAAA"}
--------------------------------------------------------------------------------
/Angular-2-Animations/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 | import { AppComponent } from './app.component';
4 | @NgModule({
5 | imports: [ BrowserModule ],
6 | declarations: [ AppComponent ],
7 | bootstrap: [ AppComponent ]
8 | })
9 | export class AppModule { }
10 |
--------------------------------------------------------------------------------
/Angular-2-Animations/app/main.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var platform_browser_dynamic_1 = require('@angular/platform-browser-dynamic');
3 | var app_module_1 = require('./app.module');
4 | var platform = platform_browser_dynamic_1.platformBrowserDynamic();
5 | platform.bootstrapModule(app_module_1.AppModule);
6 | //# sourceMappingURL=main.js.map
--------------------------------------------------------------------------------
/Angular-2-Animations/app/main.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":";AAAA,yCAAuC,mCAAmC,CAAC,CAAA;AAC3E,2BAA0B,cAAc,CAAC,CAAA;AACzC,IAAM,QAAQ,GAAG,iDAAsB,EAAE,CAAC;AAC1C,QAAQ,CAAC,eAAe,CAAC,sBAAS,CAAC,CAAC"}
--------------------------------------------------------------------------------
/Angular-2-Animations/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { AppModule } from './app.module';
3 | const platform = platformBrowserDynamic();
4 | platform.bootstrapModule(AppModule);
5 |
--------------------------------------------------------------------------------
/Angular-2-Animations/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Angular QuickStart
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 |
21 | Loading...
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Angular-2-Animations/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-quickstart",
3 | "version": "1.0.0",
4 | "scripts": {
5 | "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
6 | "lite": "lite-server",
7 | "postinstall": "typings install",
8 | "tsc": "tsc",
9 | "tsc:w": "tsc -w",
10 | "typings": "typings"
11 | },
12 | "license": "ISC",
13 | "dependencies": {
14 | "@angular/common": "2.0.0",
15 | "@angular/compiler": "2.0.0",
16 | "@angular/core": "2.0.0",
17 | "@angular/forms": "2.0.0",
18 | "@angular/http": "2.0.0",
19 | "@angular/platform-browser": "2.0.0",
20 | "@angular/platform-browser-dynamic": "2.0.0",
21 | "@angular/router": "3.0.0",
22 | "@angular/upgrade": "2.0.0",
23 | "core-js": "^2.4.1",
24 | "reflect-metadata": "^0.1.3",
25 | "rxjs": "5.0.0-beta.12",
26 | "systemjs": "0.19.27",
27 | "zone.js": "^0.6.23",
28 | "angular2-in-memory-web-api": "0.0.20",
29 | "bootstrap": "^3.3.6"
30 | },
31 | "devDependencies": {
32 | "concurrently": "^2.2.0",
33 | "lite-server": "^2.2.2",
34 | "typescript": "^2.0.2",
35 | "typings":"^1.3.2"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/Angular-2-Animations/styles.css:
--------------------------------------------------------------------------------
1 | /* Master Styles */
2 | h1 {
3 | color: #369;
4 | font-family: Arial, Helvetica, sans-serif;
5 | font-size: 250%;
6 | }
7 | h2, h3 {
8 | color: #444;
9 | font-family: Arial, Helvetica, sans-serif;
10 | font-weight: lighter;
11 | }
12 | body {
13 | margin: 2em;
14 | }
15 | body, input[text], button {
16 | color: #888;
17 | font-family: Cambria, Georgia;
18 | }
19 | a {
20 | cursor: pointer;
21 | cursor: hand;
22 | }
23 | button {
24 | font-family: Arial;
25 | background-color: #eee;
26 | border: none;
27 | padding: 5px 10px;
28 | border-radius: 4px;
29 | cursor: pointer;
30 | cursor: hand;
31 | }
32 | button:hover {
33 | background-color: #cfd8dc;
34 | }
35 | button:disabled {
36 | background-color: #eee;
37 | color: #aaa;
38 | cursor: auto;
39 | }
40 |
41 | /* Navigation link styles */
42 | nav a {
43 | padding: 5px 10px;
44 | text-decoration: none;
45 | margin-top: 10px;
46 | display: inline-block;
47 | background-color: #eee;
48 | border-radius: 4px;
49 | }
50 | nav a:visited, a:link {
51 | color: #607D8B;
52 | }
53 | nav a:hover {
54 | color: #039be5;
55 | background-color: #CFD8DC;
56 | }
57 | nav a.active {
58 | color: #039be5;
59 | }
60 |
61 | /* items class */
62 | .items {
63 | margin: 0 0 2em 0;
64 | list-style-type: none;
65 | padding-left: 0;
66 | width: 10em;
67 | }
68 | .items li {
69 | cursor: pointer;
70 | position: relative;
71 | left: 0;
72 | background-color: #EEE;
73 | margin: .5em;
74 | padding: .3em;
75 | height: 1.6em;
76 | border-radius: 4px;
77 | }
78 | .items li:hover {
79 | color: #607D8B;
80 | background-color: #DDD;
81 | left: .1em;
82 | }
83 | .items li.selected:hover {
84 | background-color: #BBD8DC;
85 | color: white;
86 | }
87 |
88 | .items .text {
89 | position: relative;
90 | top: -3px;
91 | }
92 |
93 | .items li {
94 | cursor: pointer;
95 | position: relative;
96 | left: 0;
97 | background-color: #EEE;
98 | margin: .5em;
99 | padding: .3em;
100 | height: 1.6em;
101 | border-radius: 4px;
102 | }
103 |
104 | .items .badge {
105 | display: inline-block;
106 | font-size: small;
107 | color: white;
108 | padding: 0.8em 0.7em 0 0.7em;
109 | background-color: #607D8B;
110 | line-height: 1em;
111 | position: relative;
112 | left: -1px;
113 | top: -4px;
114 | height: 1.8em;
115 | margin-right: .8em;
116 | border-radius: 4px 0 0 4px;
117 | }
118 | .items li.selected {
119 | background-color: #CFD8DC;
120 | color: white;
121 | }
122 | /* everywhere else */
123 | * {
124 | font-family: Arial, Helvetica, sans-serif;
125 | }
126 |
127 | .box{
128 | margin: 10px;
129 | height: 200px;
130 | width: 200px;
131 | background-color: black;
132 | border: 1px solid black;
133 | }
134 |
--------------------------------------------------------------------------------
/Angular-2-Animations/systemjs.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * System configuration for Angular samples
3 | * Adjust as necessary for your application needs.
4 | */
5 | (function (global) {
6 | System.config({
7 | paths: {
8 | // paths serve as alias
9 | 'npm:': 'node_modules/'
10 | },
11 | // map tells the System loader where to look for things
12 | map: {
13 | // our app is within the app folder
14 | app: 'app',
15 | // angular bundles
16 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
17 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
18 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
19 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
20 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
21 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
22 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
23 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
24 | // other libraries
25 | 'rxjs': 'npm:rxjs',
26 | 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
27 | },
28 | // packages tells the System loader how to load when no filename and/or no extension
29 | packages: {
30 | app: {
31 | main: './main.js',
32 | defaultExtension: 'js'
33 | },
34 | rxjs: {
35 | defaultExtension: 'js'
36 | },
37 | 'angular-in-memory-web-api': {
38 | main: './index.js',
39 | defaultExtension: 'js'
40 | }
41 | }
42 | });
43 | })(this);
44 |
--------------------------------------------------------------------------------
/Angular-2-Animations/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "moduleResolution": "node",
6 | "sourceMap": true,
7 | "emitDecoratorMetadata": true,
8 | "experimentalDecorators": true,
9 | "removeComments": false,
10 | "noImplicitAny": false
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/Angular-2-Animations/typings.json:
--------------------------------------------------------------------------------
1 | {
2 | "globalDependencies": {
3 | "core-js": "registry:dt/core-js#0.0.0+20160725163759",
4 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
5 | "node": "registry:dt/node#6.0.0+20160909174046"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------