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

getting closer

Browse Source
This commit is contained in:
Adam Bradley
2015-04-26 21:59:56 -05:00
parent 08a4cf32ca
commit c6f2f49a43
3 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,12 +8,12 @@
<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>
<p>
<input type="range" (input)="percent($event)" value="50" min="0" max="100" style="width:200px">
<input type="range" (input)="percent($event)" value="0" min="0" max="100" style="width:200px">
</p>
<p>

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

@@ -16,13 +16,15 @@ class IonicApp {
fadeOut() {
this.animation = new Animation();
this.animation.elements( document.querySelectorAll('.square') );
this.animation.debug(2);
this.animation.duration(500);
this.animation.duration(2000);
this.animation.easing('swing');
this.animation.property('opacity', 0);
this.animation.property('opacity', 0.2);
this.animation.property('translateX', '100px');
this.animation.property('translateY', '100px');
this.animation.property('rotateZ', '180deg');
this.animation.property('scale', '0.5');
let q = this.animation.start();
@@ -34,13 +36,15 @@ class IonicApp {
fadeIn() {
this.animation = new Animation();
this.animation.elements( document.querySelectorAll('.square') );
this.animation.debug(2);
this.animation.duration(2500);
this.animation.duration(2000);
this.animation.easing('swing');
this.animation.property('opacity', 1);
this.animation.property('translateX', '0px');
this.animation.property('translateY', '0px');
this.animation.property('rotateZ', '0deg');
this.animation.property('scale', '1');
let q = this.animation.start();
@@ -57,6 +61,18 @@ class IonicApp {
let ratio = parseFloat(ev.srcElement.value) / 100;
console.log('percent ratio', ratio);
this.animation = new Animation();
this.animation.elements( document.querySelectorAll('.square') );
this.animation.duration(2000);
this.animation.easing('swing');
this.animation.property('opacity', 0.2);
this.animation.property('translateX', '100px');
this.animation.property('translateY', '100px');
this.animation.property('rotateZ', '180deg');
this.animation.property('scale', '0.5');
this.animation.percent(ratio);
}
@@ -68,12 +84,13 @@ class IonicApp {
var elements = document.querySelectorAll('.square');
Velocity(elements, {
opacity: 0,
translateX: '100px'
}, 5000);
translateX: '100px',
rotateZ: '90deg'
}, 2000);
setTimeout(function() {
Velocity(elements, "stop");
}, 1000)
// setTimeout(function() {
// Velocity(elements, "stop");
// }, 1000)
}
}