javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +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

33
ionic/collide/animation.js
View File

@ -27,11 +27,16 @@ export class Animation {
}
elements(ele) {
if (!ele) {
this._elements = null;
if (ele && ele.length > 0) {
this._elements = ele;
} else if (ele && ele.nodeType) {
this._elements = [ele];
} else {
this._elements = !ele.length ? [ele] : ele;
this._elements = null;
}
return this;
}
@ -55,6 +60,7 @@ export class Animation {
// in the next frame, do all the DOM GETs to load element info
this._nextAF = dom.raf(() => {
/**********************************
Animation Call-Wide Variables
**********************************/
@ -101,10 +107,14 @@ export class Animation {
_queueAnimation() {
if (this._elements) {
if (this._call === null) return;
if (this._call === null) {
return;
}
var eleData;
for (var i = 0, ii = this._elements.length, element; i < ii && (element = this._elements[i]); i++) {
if (element) {
eleData = data(element);
if (eleData) {
eleData.isAnimating = true;
@ -125,9 +135,9 @@ export class Animation {
Collide.dequeue(element);
}
}
}
/* Once the final element in this call's element set has been processed, push the call array onto
Collide.State.calls for the animation tick to immediately begin processing. */
/* Push the call array onto Collide.State.calls for the animation tick to immediately begin processing. */
/* Add the current call plus its associated metadata (the element set and the call's options) onto the global call container.
Anything on this call container is subjected to tick() processing. */
Collide.State.calls.push([ this._call,
@ -252,13 +262,12 @@ export class Animation {
Properties
***************/
properties(val) {
this._properties = val || {};
return this;
to() {
if (arguments.length > 1) {
this._properties[ arguments[0] ] = arguments[1];
} else {
this._properties = arguments[0] || {};
}
property(key, val) {
this._properties[key] = val;
return this;
}

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);
}
}

61
ionic/util/dom.js
View File

@ -1,11 +1,11 @@
const nativeRaf= window.requestAnimationFrame ||
const nativeRaf = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame
window.mozRequestAnimationFrame;
const nativeCancelRaf = window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame
window.webkitCancelRequestAnimationFrame;
export const raf = nativeRaf || function(callback) {
let timeCurrent = (new Date()).getTime(),
@ -20,65 +20,65 @@ export const raf = nativeRaf || function(callback) {
}
export const rafCancel = nativeRaf ? nativeCancelRaf : function(id) {
return window.cancelTimeout(id)
return window.cancelTimeout(id);
}
export function rafPromise() {
return new Promise(resolve => raf(resolve))
return new Promise(resolve => raf(resolve));
}
export const isSVG = val => window.SVGElement && (val instanceof window.SVGElement)
export const isSVG = val => window.SVGElement && (val instanceof window.SVGElement);
// We only need to test for webkit in our supported browsers. Webkit is the only browser still
// using prefixes.
// Code adapted from angular-animate.js
export let css = {}
export let css = {};
if (window.ontransitionend === undefined && window.onwebkittransitionend !== undefined) {
css.prefix = 'webkit'
css.transition = 'webkitTransition'
css.transform = 'webkitTransform'
css.transitionEnd = 'webkitTransitionEnd transitionend'
css.prefix = 'webkit';
css.transition = 'webkitTransition';
css.transform = 'webkitTransform';
css.transitionEnd = 'webkitTransitionEnd transitionend';
} else {
css.prefix = ''
css.transform = 'transform'
css.transition = 'transition'
css.transitionEnd = 'transitionend'
css.prefix = '';
css.transform = 'transform';
css.transition = 'transition';
css.transitionEnd = 'transitionend';
}
export function transitionEndPromise(el:Element) {
return new Promise(resolve => {
css.transitionEnd.split(' ').forEach(eventName => {
el.addEventListener(eventName, onTransitionEnd)
el.addEventListener(eventName, onTransitionEnd);
})
function onTransitionEnd(ev) {
// Don't allow bubbled transitionend events
if (ev.target !== el) {
return
return;
}
css.transitionEnd.split(' ').forEach(eventName => {
el.removeEventListener(css.transitionEnd, onTransitionEnd)
})
resolve(ev)
resolve(ev);
}
})
});
}
export function ready() {
return new Promise(resolve => {
if (document.readyState === 'complete' || document.readyState === 'interactive') {
setTimeout(resolve)
setTimeout(resolve);
} else {
function completed() {
resolve()
document.removeEventListener('DOMContentLoaded', completed, false)
window.removeEventListener('load', completed, false)
resolve();
document.removeEventListener('DOMContentLoaded', completed, false);
window.removeEventListener('load', completed, false);
}
document.addEventListener('DOMContentLoaded', completed, false)
window.addEventListener('load', completed, false)
document.addEventListener('DOMContentLoaded', completed, false);
window.addEventListener('load', completed, false);
}
})
}
@ -86,16 +86,15 @@ export function ready() {
export function windowLoad() {
return new Promise(resolve => {
if (document.readyState === 'complete') {
setTimeout(resolve)
setTimeout(resolve);
} else {
function completed() {
resolve()
window.removeEventListener('load', completed, false)
resolve();
window.removeEventListener('load', completed, false);
}
window.addEventListener('load', completed, false)
window.addEventListener('load', completed, false);
}
})
});
}