feat(animate): adds basic support for CSS animations on enter and leave

Closes #3876
2015-08-28 14:39:34 -07:00
parent effbb54f3d
commit 39ce9d3397
26 changed files with 688 additions and 8 deletions
@@ -0,0 +1,14 @@
+import {Component, View, NgIf} from 'angular2/angular2';
+
+@Component({selector: 'animate-app'})
+@View({
+  directives: [NgIf],
+  template: `
+    <h1>The box is {{visible ? 'visible' : 'hidden'}}</h1>
+    <div class="ng-animate box" *ng-if="visible"></div>
+    <button (click)="visible = !visible">Animate</button>
+  `
+})
+export class AnimateApp {
+  visible: boolean = false;
+}
@@ -0,0 +1,25 @@
+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;
+}
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <title>Animation Example</title>
+  <link rel="stylesheet" type="text/css" href="./css/app.css" />
+  <base href="/examples/src/animate/">
+<body>
+  <animate-app>Loading...</animate-app>
+  $SCRIPTS$
+</body>
+</html>
@@ -0,0 +1,6 @@
+import {AnimateApp} from './animate-app';
+import {bootstrap} from 'angular2/bootstrap';
+
+export function main() {
+  bootstrap(AnimateApp);
+}