docs(animation): new animation demo

2026-03-13 10:22:08 +08:00 · 2015-09-11 16:25:49 -05:00
parent 58a8bb020f
commit 887da9c216
6 changed files with 101 additions and 98 deletions
--- a/demos/animations/index.ts
+++ b/demos/animations/index.ts
@@ -1,49 +1,22 @@
 import {App, Animation} from 'ionic/ionic';

-
-let opacity = 0.2;
-let rotateZ = '180deg';
-let translateX = '100px';
-let scale = 0.6;
-
@App({
  templateUrl: 'main.html'
 })
 class IonicApp {

  constructor() {
-    this.animation = new Animation();

+    this.animation = new Animation();
    this.animation
      .duration(2000)
-      .easing('spring', { damping: 6, elasticity: 10 });

+    var ionitronSpin = new Animation(document.querySelector('#ionitron'));
+    ionitronSpin
+      .from('transform', 'rotate(0deg)')
+      .to('transform', 'rotate(360deg)')

-    var ball = new Animation( document.querySelector('.ball') );
-    ball
-      .from('translateX', '0px')
-      .to('translateX', '250px')
-
-    this.animation.add(ball);
-
-
-    var row1 = new Animation( document.querySelectorAll('.square') );
-    row1
-      .from('opacity', 0.8)
-      .to('opacity', 0.2)
-
-    this.animation.add(row1);
-
-    var row2 = new Animation( document.querySelectorAll('.square2') );
-    row2
-      .from('rotate', '0deg')
-      .from('scale', '1')
-      .to('rotate', '90deg')
-      .to('scale', '0.5')
-      .before.addClass('added-before-play')
-      .after.addClass('added-after-finish')
-
-    this.animation.add(row1, row2);
+    this.animation.add(ionitronSpin);

    this.animation.onReady(animation => {
      console.log('onReady', animation);
--- a/demos/animations/main.html
+++ b/demos/animations/main.html
@@ -1,53 +1,33 @@
 <html>
 <head>
-  <title>Animation Tests</title>
+  <title>Animations</title>
  <style>
-    .ball-container {
+    #ionitron {
+      width: 100px;
+      height: 100px;
      position: absolute;
-      top: 200px;
-      left: 20px;
-      border: 1px solid gray;
-      width: 300px;
-      height: 51px;
-    }
-    .ball {
-      position: absolute;
-      width: 50px;
-      height: 50px;
-      background: blue;
+      top: 45%;
+      margin-top: -50px;
+      left: 50%;
+      margin-left: -50px;
    }
  </style>
 </head>
 <body>

-  <div class="ball-container">
-    <div class="ball"></div>
+  <img src="http://ionicframework.com/present-ionic/slides/img/me.png" id="ionitron">
+
+  <div style="position:absolute; bottom: 0; display:inline;">
+    <button icon pause primary (click)="pause($event)">
+      Pause
+      <icon pause></icon>
+    </button>
+    <button icon play secondary (click)="play($event)">
+      Play
+      <icon play></icon>
+    </button>
  </div>
-
-  <div style="position: absolute; top: 300px; left: 20px;">
-
-    <div class="red square" style="position:absolute; width:100px; height:100px; background:red; top: 0; left: 0;"></div>
-    <div class="green square" style="position:absolute; width:100px; height:100px; background:green; top: 0; left: 100px;"></div>
-    <div class="blue square" style="position:absolute; width:100px; height:100px; background:blue; top: 0; left: 200px;"></div>
-
-  </div>
-
-  <div style="position: absolute; top: 400px; left: 20px;">
-
-    <div class="yellow square2" style="position:absolute; width:100px; height:100px; background:yellow; top: 0; left: 0;"></div>
-    <div class="purple square2" style="position:absolute; width:100px; height:100px; background:purple; top: 0; left: 100px;"></div>
-    <div class="maroon square2" style="position:absolute; width:100px; height:100px; background:maroon; top: 0; left: 200px;"></div>
-
-  </div>
-
-  <p>
-    <input type="range" (input)="progress($event)" value="0" min="0" step="0.001" max="1" style="width:200px">
-  </p>
-
-  <p>
-    <button (click)="play($event)">Play</button>
-    <button (click)="pause($event)">Pause</button>
-  </p>
+  

 </body>
 </html>
--- a/demos/buttons/index.html
+++ b/demos/buttons/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+
+  <link href="../../css/ionic.css" rel="stylesheet">
+</head>
+<body>
+
+  <ion-app>
+    <ion-loading-icon></ion-loading-icon>
+  </ion-app>
+
+  <script src="../../js/ionic.bundle.js"></script>
+
+  <script>System.import("index");</script>
+
+</body>
+</html>
--- a/demos/buttons/index.ts
+++ b/demos/buttons/index.ts
@@ -0,0 +1,7 @@
+import {App} from 'ionic/ionic';
+
+@App({
+  templateUrl: 'main.html'
+})
+
+class DemoApp {}
--- a/demos/buttons/main.html
+++ b/demos/buttons/main.html
@@ -0,0 +1,31 @@
+
+<ion-toolbar>
+  <ion-title>Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content class="padding" style="text-align:center">
+
+
+  <h4>Colors</h4>
+
+  <p>
+    <button block>Default</button>
+  </p>
+
+  <p>
+    <button secondary block>Secondary</button>
+  </p>
+
+  <p>
+    <button danger block>Danger</button>
+  </p>
+
+  <p>
+    <button light block>Light</button>
+  </p>
+
+  <p>
+    <button dark block>Dark</button>
+  </p>
+
+</ion-content>
--- a/demos/navigation/index.ts
+++ b/demos/navigation/index.ts
@@ -7,18 +7,12 @@ import {NavParams, NavController} from 'ionic/ionic';
  template: '' +
    '<ion-navbar *navbar primary>' +
      '<ion-title>{{title}}</ion-title>' +
-      '<ion-nav-items secondary>' +
-        '<button>S1</button>' +
-      '</ion-nav-items>' +
    '</ion-navbar>' +
    '<ion-content class="padding">' +
-      '<p>{{title}}</p>' +
-      '<p><button id="from1To2" primary (click)="push()">Push (Go to 2nd)</button></p>' +
-      '<p><button [push-data]="pushData" [nav-push]="pushPage">Push w/ nav-push (Go to 2nd)</button></p>' +
-      '<p><button (click)="setItems()">setItems() (Go to 3rd, no history)</button></p>' +
-      '<icon class="ion-ios-arrow-back"></icon>' +
-      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+      '<h1>{{title}}</h1>' +
+      '<p><button id="from1To2" secondary (click)="push()">(Push) Go to Second Page</button></p>' +
+      '<p><button secondary [push-data]="pushData" [nav-push]="pushPage">(Nav-Push) Go to Second Page</button></p>' +
+      '<p><button danger (click)="setItems()">(setItems) Go to Third Page</button></p>' +
    '</ion-content>'
 })
 class FirstPage {
@@ -29,7 +23,6 @@ class FirstPage {
  ) {
    this.nav = nav;
    this.title = 'First Page';
-
    this.pushPage = SecondPage;
    this.pushData = {
      id: 420
@@ -40,7 +33,6 @@ class FirstPage {
    let items = [
      ThirdPage
    ];
-
    this.nav.setItems(items);
  }

@@ -52,14 +44,15 @@ class FirstPage {

@IonicView({
  template: `
+    <ion-navbar secondary *navbar>
+      <ion-title>{{title}}</ion-title>
+    </ion-navbar>
    <ion-content class="padding">
      <h1>Second page</h1>
-      <p>This page does not have a nav bar!</p>
-      <p><button (click)="pop()">Pop (Go back to 1st)</button></p>
-      <p><button id="from2To1" nav-pop>Pop with NavPop (Go back to 1st)</button></p>
-      <p><button id="from2To3" (click)="push()">Push (Go to 3rd)</button></p>
-      <p><button (click)="setItems()">setItems() (Go to 3rd, FirstPage 1st in history)</button></p>
-      <div class="green"><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f></div>
+      <p><button (click)="pop()">(Pop) Go back to First Page</button></p>
+      <p><button id="from2To1" nav-pop>(NavPop) Go back to First Page</button></p>
+      <p><button danger id="from2To3" (click)="push()">(Push) Go to Third Page</button></p>
+      <p><button danger (click)="setItems()">(setItems) Go to Third Page</button></p>
    </ion-content>
  `
 })
@@ -70,7 +63,6 @@ class SecondPage {
  ) {
    this.nav = nav;
    this.params = params;
-
    console.log('Second page params:', params);
  }

@@ -79,7 +71,6 @@ class SecondPage {
      FirstPage,
      ThirdPage
    ];
-
    this.nav.setItems(items);
  }

@@ -96,12 +87,13 @@ class SecondPage {

@IonicView({
  template: `
-    <ion-navbar *navbar><ion-title>Third Page Header</ion-title></ion-navbar>
+    <ion-navbar danger *navbar>
+      <ion-title>Third Page Header</ion-title>
+    </ion-navbar>
    <ion-content class="padding">
      <p>
-        <button id="from3To2" (click)="pop()">Pop (Go back to 2nd)</button>
+        <button secondary id="from3To2" (click)="pop()">(Pop) Go back to Second Page</button>
      </p>
-      <div class="yellow"><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f></div>
    </ion-content>
  `
 })
@@ -119,11 +111,10 @@ class ThirdPage {
 }


-
@App({
  template: '<ion-nav [root]="root"></ion-nav>'
 })
-class E2EApp {
+class DemoApp {
  constructor() {
    this.root = FirstPage;
  }