javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

collide updates

Browse Source
This commit is contained in:
Adam Bradley
2015-04-26 11:59:44 -05:00
parent e05a87518b
commit c6b6a07d06
12 changed files with 179 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@
<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 class="blue square" style="position:absolute; width:100px; height:100px; background:blue; top: 0; left: 200px;"></div> -->
</div>
@ -17,7 +17,8 @@
</p>
<p>
<button class="button button-primary" (click)="start($event)">Collide Start</button>
<button class="button button-primary" (click)="fadeOut($event)">Collide Fade Out</button>
<button class="button button-primary" (click)="fadeIn($event)">Collide Fade In</button>
</p>

42
ionic/components/app/test/animations/main.js
View File

@ -10,22 +10,40 @@ import {Animation} from 'ionic/ionic';
class IonicApp {
constructor() {
this.animation = new Animation();
this.animation.elements( document.querySelectorAll('.square') );
this.animation.debug(2);
this.animation.duration(500);
this.animation.easing('swing');
this.animation.property('opacity', 0);
}
start() {
let q = this.animation.start();
fadeOut() {
let animation = new Animation();
animation.elements( document.querySelectorAll('.square') );
animation.debug(2);
animation.duration(500);
animation.easing('swing');
animation.property('opacity', 0);
let q = animation.start();
q.then(()=> {
console.log('animation complete')
console.log('fade out complete')
});
}
fadeIn() {
let animation = new Animation();
animation.elements( document.querySelectorAll('.square') );
animation.debug(2);
animation.duration(500);
animation.easing('swing');
animation.property('opacity', 1);
let q = animation.start();
q.then(()=> {
console.log('fade in complete')
});
}
@ -41,7 +59,7 @@ class IonicApp {
}
velocityStart() {
Velocity(document.querySelectorAll('.square'), { opacity: 0 }, 500);
window.Velocity(document.querySelectorAll('.square'), { opacity: 0 }, 500);
}
}