collide updates

ionic/collide/animation.js

@@ -27,11 +27,16 @@ export class Animation {
   }
 
   elements(ele) {
-    if (!ele) {
+    if (ele && ele.length > 0) {
-      this._elements = null;
+      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
+      /* Push the call array onto Collide.State.calls for the animation tick to immediately begin processing. */
-         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) {
+  to() {
-    this._properties = val || {};
+    if (arguments.length > 1) {
-    return this;
+      this._properties[ arguments[0] ] = arguments[1];
+    } else {
+      this._properties = arguments[0] || {};
     }
-
-  property(key, val) {
-    this._properties[key] = val;
     return this;
   }
 

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.elements( document.querySelectorAll('.square') )
-
+        .to('opacity', opacity)
-    row1.property('opacity', opacity)
+        .to('translateX', translateX)
-        .property('translateX', translateX)
+        .to('translateY', translateX)
-        .property('translateY', translateX)
+        .to('rotateZ', rotateZ)
-        .property('rotateZ', rotateZ)
+        .to('scale', scale);
-        .property('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.to('opacity', opacity);
-    row2.property('translateX', '-100px');
+    row2.to('translateX', '-100px');
-    row2.property('translateY', '-100px');
+    row2.to('translateY', '-100px');
-    row2.property('rotateZ', '-180deg');
+    row2.to('rotateZ', '-180deg');
-    row2.property('scale', 0.4);
+    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.to('opacity', 1);
-    row1.property('translateX', 0);
+    row1.to('translateX', 0);
-    row1.property('translateY', 0);
+    row1.to('translateY', 0);
-    row1.property('rotateZ', 0);
+    row1.to('rotateZ', 0);
-    row1.property('scale', 1);
+    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.to('opacity', 1);
-    row2.property('translateX', 0);
+    row2.to('translateX', 0);
-    row2.property('translateY', 0);
+    row2.to('translateY', 0);
-    row2.property('rotateZ', 0);
+    row2.to('rotateZ', 0);
-    row2.property('scale', 1);
+    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.elements( document.querySelectorAll('.square') )
-
+          .to('opacity', opacity)
-      row1.property('opacity', 1);
+          .to('translateX', translateX)
-      row1.property('translateX', 0);
+          .to('translateY', translateX)
-      row1.property('translateY', 0);
+          .to('rotateZ', rotateZ)
-      row1.property('rotateZ', 0);
+          .to('scale', scale);
-      row1.property('scale', 1);
 
       this.percentAnimation.addChild(row1);
 
-
       var row2 = new Animation();
       row2.elements( document.querySelectorAll('.square2') );
 
-      row2.property('opacity', 1);
+      row2.to('opacity', opacity);
-      row2.property('translateX', 0);
+      row2.to('translateX', '-100px');
-      row2.property('translateY', 0);
+      row2.to('translateY', '-100px');
-      row2.property('rotateZ', 0);
+      row2.to('rotateZ', '-180deg');
-      row2.property('scale', 1);
+      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);
   }
 
 }

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.prefix = 'webkit';
-  css.transition = 'webkitTransition'
+  css.transition = 'webkitTransition';
-  css.transform = 'webkitTransform'
+  css.transform = 'webkitTransform';
-  css.transitionEnd = 'webkitTransitionEnd transitionend'
+  css.transitionEnd = 'webkitTransitionEnd transitionend';
 } else {
-  css.prefix = ''
+  css.prefix = '';
-  css.transform = 'transform'
+  css.transform = 'transform';
-  css.transition = 'transition'
+  css.transition = 'transition';
-  css.transitionEnd = 'transitionend'
+  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()
+        resolve();
-        document.removeEventListener('DOMContentLoaded', completed, false)
+        document.removeEventListener('DOMContentLoaded', completed, false);
-        window.removeEventListener('load', completed, false)
+        window.removeEventListener('load', completed, false);
       }
 
-      document.addEventListener('DOMContentLoaded', completed, false)
+      document.addEventListener('DOMContentLoaded', completed, false);
-      window.addEventListener('load', 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()
+        resolve();
-        window.removeEventListener('load', completed, false)
+        window.removeEventListener('load', completed, false);
       }
 
-      window.addEventListener('load', completed, false)
+      window.addEventListener('load', completed, false);
     }
-  })
+  });
 }