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-27 22:34:28 -05:00
parent 7fb5c90569
commit d1c78bc5bf
9 changed files with 248 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@
</head>
<body>
<div style="position: absolute; top: 20px; left: 300px;">
<div style="position: absolute; top: 300px; left: 0px;">
<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>

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

@@ -1,7 +1,10 @@
import {Component, Decorator, View as NgView, NgElement, bootstrap} from 'angular2/angular2';
import {Animation} from 'ionic/ionic';
let opacity = 0.2;
let rotateZ = '180deg';
let translateX = '100px';
let scale = 0.6;
@Component({ selector: '[ion-app]' })
@NgView({
@@ -10,21 +13,22 @@ import {Animation} from 'ionic/ionic';
class IonicApp {
constructor() {
}
fadeOut() {
console.debug('fadeOut');
this.animation = new Animation();
this.animation.elements( document.querySelectorAll('.square') );
this.animation.duration(2000);
this.animation.easing('swing');
this.animation.duration(1000);
this.animation.easing('linear');
this.animation.property('opacity', opacity);
this.animation.property('translateX', translateX);
this.animation.property('translateY', translateX);
this.animation.property('rotateZ', rotateZ);
this.animation.property('scale', scale);
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,17 +38,18 @@ class IonicApp {
}
fadeIn() {
console.debug('fadeIn');
this.animation = new Animation();
this.animation.elements( document.querySelectorAll('.square') );
this.animation.duration(2000);
this.animation.easing('swing');
this.animation.duration(1000);
this.animation.easing('linear');
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');
this.animation.property('translateX', 0);
this.animation.property('translateY', 0);
this.animation.property('rotateZ', 0);
this.animation.property('scale', 1);
let q = this.animation.start();
@@ -58,26 +63,22 @@ class IonicApp {
}
percent(ev) {
let ratio = parseFloat(ev.srcElement.value) / 100;
console.log('percent ratio', ratio);
let percentComplete = parseFloat(ev.srcElement.value) / 100;
this.animation = new Animation();
this.animation.elements( document.querySelectorAll('.square') );
if (!this.percentAnimation) {
this.percentAnimation = new Animation();
this.percentAnimation.elements( document.querySelectorAll('.square') );
this.animation.duration(2000);
this.animation.easing('swing');
this.percentAnimation.property('opacity', opacity);
this.percentAnimation.property('translateX', translateX);
this.percentAnimation.property('translateY', translateX);
this.percentAnimation.property('rotateZ', rotateZ);
this.percentAnimation.property('scale', scale);
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.percentAnimation.ready();
}
this.animation.percent(ratio);
}
stop() {
this.animation.stop();
this.percentAnimation.percent(percentComplete);
}
velocityStart() {