cargdev/angular
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(animations): allow animation integration support into host params

Browse Source 
Closes #9044
Closes #9933
This commit is contained in:
Matias Niemelä
2016-07-08 17:11:12 -07:00
parent 5af1e891cd
commit 806a25413c
15 changed files with 172 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
modules/playground/src/animate/app/animate-app.ts
View File

@ -19,22 +19,23 @@ import {
} from '@angular/core';
@Component({
host: {
'[@backgroundAnimation]': "bgStatus"
},
selector: 'animate-app',
styleUrls: ['css/animate-app.css'],
template: `
<div [@backgroundAnimation]="bgStatus">
<button (click)="state='start'">Start State</button>
<button (click)="state='active'">Active State</button>
|
<button (click)="state='void'">Void State</button>
<button (click)="state='default'">Unhandled (default) State</button>
<button style="float:right" (click)="bgStatus='blur'">Blur Page</button>
<hr />
<div *ngFor="let item of items" class="box" [@boxAnimation]="state">
{{ item }}
<div *ngIf="true">
something inside
</div>
<button (click)="state='start'">Start State</button>
<button (click)="state='active'">Active State</button>
|
<button (click)="state='void'">Void State</button>
<button (click)="state='default'">Unhandled (default) State</button>
<button style="float:right" (click)="bgStatus='blur'">Blur Page (Host)</button>
<hr />
<div *ngFor="let item of items" class="box" [@boxAnimation]="state">
{{ item }}
<div *ngIf="true">
something inside
</div>
</div>
`,

11
modules/playground/src/animate/index.html
View File

@ -2,6 +2,17 @@
<html>
<title>Animation Example</title>
<link rel="stylesheet" type="text/css" href="./css/app.css" />
<style>
animate-app {
display:block;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
padding:50px;
}
</style>
<body>
<animate-app>Loading...</animate-app>
<script src="../bootstrap.js"></script>