From 6cd4a797a329f16254911ec4b19c2e9f05bb100b Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 30 Apr 2015 20:09:37 -0500 Subject: [PATCH] collide updates --- ionic/collide/animation.js | 67 +++++++++-------- ionic/components/app/test/animations/main.js | 76 +++++++++----------- ionic/util/dom.js | 61 ++++++++-------- 3 files changed, 103 insertions(+), 101 deletions(-) diff --git a/ionic/collide/animation.js b/ionic/collide/animation.js index 1ed0c581a8..f820eb5dc5 100644 --- a/ionic/collide/animation.js +++ b/ionic/collide/animation.js @@ -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; } diff --git a/ionic/components/app/test/animations/main.js b/ionic/components/app/test/animations/main.js index 8491257a67..c5e8124562 100644 --- a/ionic/components/app/test/animations/main.js +++ b/ionic/components/app/test/animations/main.js @@ -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); } } diff --git a/ionic/util/dom.js b/ionic/util/dom.js index e920c1c203..4802be59e8 100644 --- a/ionic/util/dom.js +++ b/ionic/util/dom.js @@ -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); } - }) + }); }