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

collide updates

Browse Source
This commit is contained in:
Adam Bradley
2015-04-26 20:24:04 -05:00
parent c8b6a4a535
commit 3777e1dc08
12 changed files with 127 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,8 +17,9 @@
</p>
<p>
<button class="button button-primary" (click)="fadeOut($event)">Collide Fade Out</button>
<button class="button button-primary" (click)="fadeIn($event)">Collide Fade In</button>
<button class="button button-primary" (click)="fadeOut($event)">Fade Out</button>
<button class="button button-primary" (click)="fadeIn($event)">Fade In</button>
<button class="button button-primary" (click)="stop($event)">Stop</button>
</p>

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

@@ -14,16 +14,17 @@ class IonicApp {
}
fadeOut() {
let animation = new Animation();
animation.elements( document.querySelectorAll('.square') );
animation.debug(2);
this.animation = new Animation();
this.animation.elements( document.querySelectorAll('.square') );
this.animation.debug(2);
animation.duration(500);
animation.easing('swing');
this.animation.duration(500);
this.animation.easing('swing');
animation.property('opacity', 0);
this.animation.property('opacity', 0);
this.animation.property('translateX', '100px');
let q = animation.start();
let q = this.animation.start();
q.then(()=> {
console.log('fade out complete')
@@ -31,22 +32,27 @@ class IonicApp {
}
fadeIn() {
let animation = new Animation();
animation.elements( document.querySelectorAll('.square') );
animation.debug(2);
this.animation = new Animation();
this.animation.elements( document.querySelectorAll('.square') );
this.animation.debug(2);
animation.duration(500);
animation.easing('swing');
this.animation.duration(2500);
this.animation.easing('swing');
animation.property('opacity', 1);
this.animation.property('opacity', 1);
this.animation.property('translateX', '0px');
let q = animation.start();
let q = this.animation.start();
q.then(()=> {
console.log('fade in complete')
});
}
stop() {
this.animation.stop();
}
percent(ev) {
let ratio = parseFloat(ev.srcElement.value) / 100;
console.log('percent ratio', ratio);
@@ -59,7 +65,15 @@ class IonicApp {
}
velocityStart() {
window.Velocity(document.querySelectorAll('.square'), { opacity: 0 }, 500);
var elements = document.querySelectorAll('.square');
Velocity(elements, {
opacity: 0,
translateX: '100px'
}, 5000);
setTimeout(function() {
Velocity(elements, "stop");
}, 1000)
}
}