└── 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 | --------------------------------------------------------------------------------