combines motion and animationFrame.js functions

diff --git a/js/foundation.util.motion.js b/js/foundation.util.motion.js
index f2598fd1ce6d6c85e175dcd55cc0a08cf22e57ee..c5190e8ed3e2587a14ef55266002ac0fb195a9ee 100644 (file)
--- a/js/foundation.util.motion.js
+++ b/js/foundation.util.motion.js
@@ -8,23 +8,6 @@
 var initClasses   = ['mui-enter', 'mui-leave'];
 var activeClasses = ['mui-enter-active', 'mui-leave-active'];
 
-// Find the right "transitionend" event for this browser
-var endEvent = (function() {
-  var transitions = {
-    'transition': 'transitionend',
-    'WebkitTransition': 'webkitTransitionEnd',
-    'MozTransition': 'transitionend',
-    'OTransition': 'otransitionend'
-  };
-  var elem = document.createElement('div');
-
-  for (var t in transitions){
-    if (typeof elem.style[t] !== 'undefined'){
-      return transitions[t];
-    }
-  }
-})();
-
 function animate(isIn, element, animation, cb) {
   element = $(element).eq(0);
 
@@ -35,22 +18,28 @@ function animate(isIn, element, animation, cb) {
 
   // Set up the animation
   reset();
-  element.addClass(animation);
-  element.css('transition', 'none');
+  element.addClass(animation)
+         .css('transition', 'none');
+        //  .addClass(initClass);
+  // if(isIn) element.show();
   requestAnimationFrame(function() {
     element.addClass(initClass);
     if (isIn) element.show();
   });
-
   // Start the animation
   requestAnimationFrame(function() {
     element[0].offsetWidth;
     element.css('transition', '');
     element.addClass(activeClass);
   });
+  // Move(500, element, function(){
+  //   // element[0].offsetWidth;
+  //   element.css('transition', '');
+  //   element.addClass(activeClass);
+  // });
 
   // Clean up the animation when it finishes
-  element.one('transitionend', finish);
+  element.one(Foundation.transitionend, finish).one('finished.zf.animate', finish);
 
   // Hides the element (for out animations), resets the element, and runs a callback
   function finish() {
@@ -67,15 +56,35 @@ function animate(isIn, element, animation, cb) {
 }
 
 var Motion = {
-  animateIn: function(element, animation, cb) {
+  animateIn: function(element, animation, /*duration,*/ cb) {
     animate(true, element, animation, cb);
   },
 
-  animateOut: function(element, animation, cb) {
+  animateOut: function(element, animation, /*duration,*/ cb) {
     animate(false, element, animation, cb);
   }
-}
+};
+
+var Move = function(duration, elem, fn){
+  var anim, prog, start = null;
+  // console.log('called');
+
+  function move(ts){
+    if(!start) start = window.performance.now();
+    // console.log(start, ts);
+    prog = ts - start;
+    fn.apply(elem);
+
+    if(prog < duration){ anim = window.requestAnimationFrame(move, elem); }
+    else{
+      window.cancelAnimationFrame(anim);
+      elem.trigger('finished.zf.animate', [elem]).triggerHandler('finished.zf.animate', [elem]);
+    }
+  }
+  anim = window.requestAnimationFrame(move);
+};
 
+Foundation.Move = Move;
 Foundation.Motion = Motion;
 
-}(jQuery, Foundation)
+}(jQuery, Foundation);