javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

the web animations of oz

Browse Source
This commit is contained in:
Adam Bradley
2015-05-26 08:33:32 -05:00
parent 20b9c7fa34
commit c6b95e1759
8 changed files with 311 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
ionic/components/app/test/animations/index.js
View File

@@ -19,21 +19,31 @@ class IonicApp {
this.animation = new Animation();
this.animation
.duration(1000)
.easing('ease-in-out');
.duration(2000)
.easing('spring');
var ball = new Animation( document.querySelector('.ball') );
ball
.from('translateX', '0px')
.to('translateX', '250px')
this.animation.addChild(ball);
var row1 = new Animation( document.querySelectorAll('.square') );
row1
.from('opacity', 1)
.to('opacity', 0)
.to('transform', 'scale(0)')
.beforePlay.addClass('added-before-play')
.afterFinish.addClass('added-after-finish')
.from('opacity', 0.8)
.to('opacity', 0.2)
this.animation.addChild(row1);
var row2 = new Animation( document.querySelectorAll('.square2') );
row2
.to('transform', 'rotate(90deg) scale(0.5)')
.from('rotate', '0deg')
.from('scale', '1')
.to('rotate', '90deg')
.to('scale', '0.5')
.beforePlay.addClass('added-before-play')
.afterFinish.addClass('added-after-finish')

20
ionic/components/app/test/animations/main.html
View File

@@ -2,9 +2,29 @@
<head>
<title>Animation Tests</title>
<script src="./web-animations-js/web-animations-next.dev.js"></script>
<style>
.ball-container {
position: absolute;
top: 200px;
left: 50px;
border: 1px solid gray;
width: 300px;
height: 51px;
}
.ball {
position: absolute;
width: 50px;
height: 50px;
background: blue;
}
</style>
</head>
<body>
<div class="ball-container">
<div class="ball"></div>
</div>
<div style="position: absolute; top: 300px; left: 50px;">
<div class="red square" style="position:absolute; width:100px; height:100px; background:red; top: 0; left: 0;"></div>

6
ionic/components/nav/nav-base.js
View File

@@ -24,10 +24,10 @@ export class NavBase {
this.sbActive = false;
}
set initial(Class) {
if (!this._init) {
set initial(Component) {
if (!this._init && Component) {
this._init = true;
this.push(Class);
this.push(Component);
}
}

5
ionic/components/nav/test/basic/index.js
View File

@@ -2,9 +2,8 @@ import {bootstrap} from 'angular2/angular2'
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Nav} from 'ionic/components/nav/nav'
import {Log} from 'ionic/util'
import {FirstPage} from './pages/first-page'
import {Nav} from 'ionic/components/nav/nav';
import {FirstPage} from './pages/first-page';
@Component({ selector: 'ion-app' })

2
ionic/components/tabs/tabs.js
View File

@@ -7,7 +7,7 @@ import {Injector} from 'angular2/di';
import {NavBase} from 'ionic/components/nav/nav-base';
import {IonicComponent} from 'ionic/config/component';
import {Tab} from 'ionic/components/tabs/tab';
import {Tab} from './tab';
@Component({