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

67
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,33 +107,37 @@ 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++) {
eleData = data(element);
if (eleData) {
eleData.isAnimating = true;
}
if (element) {
eleData = data(element);
if (eleData) {
eleData.isAnimating = true;
}
/*********************
Auto-Dequeuing
*********************/
/*********************
Auto-Dequeuing
*********************/
/* To fire the first non-custom-queue entry on an element, the element
must be dequeued if its queue stack consists *solely* of the current call. (This can be determined by checking
for the 'inprogress' item that is prepended to active queue stack arrays.) Regardless, whenever the element's
queue is further appended with additional items -- including delay()'s calls, the queue's
first entry is automatically fired. This behavior contrasts that of custom queues, which never auto-fire. */
/* Note: When an element set is being subjected to a non-parallel Collide call, the animation will not begin until
each one of the elements in the set has reached the end of its individually pre-existing queue chain. */
if (this._options.queue === '' && Collide.queue(element)[0] !== 'inprogress') {
Collide.dequeue(element);
/* To fire the first non-custom-queue entry on an element, the element
must be dequeued if its queue stack consists *solely* of the current call. (This can be determined by checking
for the 'inprogress' item that is prepended to active queue stack arrays.) Regardless, whenever the element's
queue is further appended with additional items -- including delay()'s calls, the queue's
first entry is automatically fired. This behavior contrasts that of custom queues, which never auto-fire. */
/* Note: When an element set is being subjected to a non-parallel Collide call, the animation will not begin until
each one of the elements in the set has reached the end of its individually pre-existing queue chain. */
if (this._options.queue === '' && Collide.queue(element)[0] !== 'inprogress') {
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;
}
property(key, val) {
this._properties[key] = val;
to() {
if (arguments.length > 1) {
this._properties[ arguments[0] ] = arguments[1];
} else {
this._properties = arguments[0] || {};
}
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);
}
})
});
}