diff --git a/demos/component-docs/app.css b/demos/component-docs/app.css
index 08f2652abd..5dd53a967f 100644
--- a/demos/component-docs/app.css
+++ b/demos/component-docs/app.css
@@ -5,3 +5,24 @@ body {
section.hidden {
display: none !important;
}
+
+#ionitron {
+ width: 100px;
+ height: 100px;
+ position: absolute;
+ top: 25%;
+ margin-top: -50px;
+ left: 50%;
+ margin-left: -50px;
+}
+
+.animation-buttons {
+ position: absolute;
+ bottom: 25%;
+ left: 60px;
+ display: inline;
+}
+
+.components-demo h4 {
+ text-align: center;
+}
diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts
index 577fd60582..863987886a 100644
--- a/demos/component-docs/index.ts
+++ b/demos/component-docs/index.ts
@@ -1,4 +1,4 @@
-import {App, ActionSheet} from 'ionic/ionic';
+import {App, ActionSheet, Animation} from 'ionic/ionic';
import {NgZone} from 'angular2/angular2';
function toTitleCase(str) {
@@ -26,6 +26,7 @@ class DemoApp {
}
});
};
+ this.setupAnimations();
}
openMenu() {
@@ -54,5 +55,26 @@ class DemoApp {
});
}
+ setupAnimations() {
+ this.animation = new Animation();
+ this.animation
+ .duration(2000)
+
+ var ionitronSpin = new Animation(document.querySelector('#ionitron'));
+ ionitronSpin
+ .from('transform', 'rotate(0deg)')
+ .to('transform', 'rotate(360deg)')
+
+ this.animation.add(ionitronSpin);
+ }
+
+ play() {
+ this.animation.play();
+ }
+
+ pause() {
+ this.animation.pause();
+ }
+
}
\ No newline at end of file
diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html
index 89aff44058..f08a2d9909 100644
--- a/demos/component-docs/main.html
+++ b/demos/component-docs/main.html
@@ -9,24 +9,231 @@
+
- TODO
+ 
+
+
+
+
+
+
-
- TODO
+
+
+
+
+
+
+ Menu
+
+
+
+
+
+ Home
+
+
+
+
+ Friends
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Schedule
+
+
+
+
+
+
+
+
+
+ Trophies
+
+
+
+
+
+
-
- TODO
+
+
+
+
+ Classes
+
+
+
+
+ Dark Arts
+
+
+
+
+ Astronomy
+
+
+
+
+ Potions
+
+
+
+
+ Charms
+
+
+
+
+
+
+
+
+ Menu
+
+
+
+
+ Invisibility Cloak
+
+
+
+
+ Call Ron
+ Maybe later
+
+
+
+
+