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-30 20:09:37 -05:00
parent 8a42dde132
commit 6cd4a797a3
3 changed files with 103 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,15 +20,13 @@ class IonicApp {
animation.duration(1000);
animation.easing('linear');
var row1 = new Animation();
row1.elements( document.querySelectorAll('.square') );
row1.property('opacity', opacity)
.property('translateX', translateX)
.property('translateY', translateX)
.property('rotateZ', rotateZ)
.property('scale', scale);
row1.elements( document.querySelectorAll('.square') )
.to('opacity', opacity)
.to('translateX', translateX)
.to('translateY', translateX)
.to('rotateZ', rotateZ)
.to('scale', scale);
animation.addChild(row1);
@@ -36,16 +34,14 @@ class IonicApp {
var row2 = new Animation();
row2.elements( document.querySelectorAll('.square2') );
row2.property('opacity', opacity);
row2.property('translateX', '-100px');
row2.property('translateY', '-100px');
row2.property('rotateZ', '-180deg');
row2.property('scale', 0.4);
row2.to('opacity', opacity);
row2.to('translateX', '-100px');
row2.to('translateY', '-100px');
row2.to('rotateZ', '-180deg');
row2.to('scale', 0.4);
animation.addChild(row2);
let q = animation.start();
q.then(()=> {
@@ -53,11 +49,11 @@ class IonicApp {
});
}
fadeIn() {
console.debug('fadeIn');
var animation = new Animation();
animation.elements();
animation.duration(1000);
animation.easing('linear');
@@ -66,11 +62,11 @@ class IonicApp {
var row1 = new Animation();
row1.elements( document.querySelectorAll('.square') );
row1.property('opacity', 1);
row1.property('translateX', 0);
row1.property('translateY', 0);
row1.property('rotateZ', 0);
row1.property('scale', 1);
row1.to('opacity', 1);
row1.to('translateX', 0);
row1.to('translateY', 0);
row1.to('rotateZ', 0);
row1.to('scale', 1);
animation.addChild(row1);
@@ -78,11 +74,11 @@ class IonicApp {
var row2 = new Animation();
row2.elements( document.querySelectorAll('.square2') );
row2.property('opacity', 1);
row2.property('translateX', 0);
row2.property('translateY', 0);
row2.property('rotateZ', 0);
row2.property('scale', 1);
row2.to('opacity', 1);
row2.to('translateX', 0);
row2.to('translateY', 0);
row2.to('rotateZ', 0);
row2.to('scale', 1);
animation.addChild(row2);
@@ -102,31 +98,29 @@ class IonicApp {
if (!this.percentAnimation) {
this.percentAnimation = new Animation();
// this.percentAnimation.name = 'top';
var row1 = new Animation();
row1.elements( document.querySelectorAll('.square') );
row1.property('opacity', 1);
row1.property('translateX', 0);
row1.property('translateY', 0);
row1.property('rotateZ', 0);
row1.property('scale', 1);
row1.elements( document.querySelectorAll('.square') )
.to('opacity', opacity)
.to('translateX', translateX)
.to('translateY', translateX)
.to('rotateZ', rotateZ)
.to('scale', scale);
this.percentAnimation.addChild(row1);
var row2 = new Animation();
row2.elements( document.querySelectorAll('.square2') );
row2.property('opacity', 1);
row2.property('translateX', 0);
row2.property('translateY', 0);
row2.property('rotateZ', 0);
row2.property('scale', 1);
row2.to('opacity', opacity);
row2.to('translateX', '-100px');
row2.to('translateY', '-100px');
row2.to('rotateZ', '-180deg');
row2.to('scale', 0.4);
this.percentAnimation.addChild(row2);
this.percentAnimation.ready();
}
@@ -143,7 +137,7 @@ class IonicApp {
// setTimeout(function() {
// Velocity(elements, "stop");
// }, 1000)
// }, 1000);
}
}