feat(core): introduce support for animations

Closes #8734

modules/playground/src/animate/app/animate-app.ts

@@ -1,13 +1,79 @@
-import {Component} from '@angular/core';
+import {
+  Component,
+  trigger,
+  state,
+  transition,
+  keyframes,
+  group,
+  animate,
+  style,
+  sequence
+} from '@angular/core';
 
 @Component({
   selector: 'animate-app',
+  styleUrls: ['css/animate-app.css'],
   template: `
-    <h1>The box is {{visible ? 'visible' : 'hidden'}}</h1>
-    <div class="ng-animate box" *ngIf="visible"></div>
-    <button (click)="visible = !visible">Animate</button>
-  `
+    <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 style="float:right" (click)="bgStatus='blur'">Blur Page</button>
+      <hr />
+      <div *ngFor="let item of items" class="box" @boxAnimation="state">
+        {{ item }}
+      </div>
+    </div>
+  `,
+  animations: [
+    trigger("backgroundAnimation", [
+      state("focus", style({ "background-color":"white" })),
+      state("blur", style({ "background-color":"grey" })),
+      transition("* => *", [
+        animate(500)
+      ])
+    ]),
+    trigger("boxAnimation", [
+      state("void, hidden", style({ "height": 0, "opacity": 0 })),
+      state("start", style({ "background-color": "red", "height": "*" })),
+      state("active", style({ "background-color": "orange", "color": "white", "font-size":"100px" })),
+
+      transition("active <=> start", [
+        animate(500, style({ "transform": "scale(2)" })),
+        animate(500)
+      ]),
+
+      transition("* => *", [
+        animate(1000, style({ "opacity": 1, "height": 300 })),
+        animate(1000, style({ "background-color": "blue" })),
+        animate(1000, keyframes([
+          style({ "background-color": "blue", "color": "black", "offset": 0.2 }),
+          style({ "background-color": "brown", "color": "black", "offset": 0.5 }),
+          style({ "background-color": "black", "color": "white", "offset": 1 })
+        ])),
+        animate(2000)
+      ])
+    ])
+  ]
 })
 export class AnimateApp {
-  visible: boolean = false;
+  public items = [];
+  public _state;
+
+  public bgStatus = 'focus';
+
+  get state() { return this._state; }
+  set state(s) {
+    this._state = s;
+    if (s == 'start' || s == 'active') {
+      this.items = [
+        1,2,3,4,5,
+        6,7,8,9,10,
+        11,12,13,14,15,
+        16,17,18,19,20
+      ];
+    } else {
+      this.items = [];
+    }
+  }
 }

modules/playground/src/animate/css/animate-app.css

@@ -0,0 +1,21 @@
+button {
+  background:red;
+  font-size:20px;
+  color:white;
+  border:0;
+  cursor:pointer;
+}
+
+.box {
+  font-size:50px;
+  border:10px solid black;
+  width:200px;
+  font-size:80px;
+  line-height:100px;
+  height:100px;
+  display:inline-block;
+  vertical-align:top;
+  text-align:center;
+  margin:5px;
+  overflow:hidden;
+}

modules/playground/src/animate/css/app.css

@@ -1,25 +0,0 @@
-body {
-  padding: 20px;
-}
-
-.box {
-  width: 100px;
-  height: 100px;
-  background-color: red;
-  transition: all 0.35s ease-in-out;
-}
-.box.blue {
-  background-color: blue;
-}
-.box.ng-enter {
-  opacity: 0;
-  height: 0;
-}
-.box.ng-enter-active {
-  opacity: 1;
-  height: 100px;
-}
-.box.ng-leave-active {
-  opacity: 0;
-  height: 0;
-}