[Improvement] Tab animation fluency && position (#379)

packages/utils/raf.js

@@ -0,0 +1,32 @@
+/**
+ * requestAnimationFrame polyfill
+ */
+
+import { isServer } from './index';
+
+let prev = Date.now();
+function fallback(fn) {
+  const curr = Date.now();
+  const ms = Math.max(0, 16 - (curr - prev));
+  const id = setTimeout(fn, ms);
+  prev = curr + ms;
+  return id;
+}
+
+const global = isServer ? global : window;
+const iRaf =
+  global.requestAnimationFrame ||
+  global.webkitRequestAnimationFrame ||
+  fallback;
+const iCancel =
+  global.cancelAnimationFrame ||
+  global.webkitCancelAnimationFrame ||
+  global.clearTimeout;
+
+export function raf(fn) {
+  return iRaf.call(global, fn);
+}
+
+export function cancel(id) {
+  iCancel.call(global, id);
+}

packages/utils/transition.js

@@ -1,73 +0,0 @@
-import Vue from 'vue';
-
-var exportObj = {};
-
-if (!Vue.prototype.$isServer) {
-  var cssPrefix = '-webkit-';
-  var vendorPrefix = 'Webkit';
-  var transformProperty = vendorPrefix + 'Transform';
-  var transformStyleName = cssPrefix + 'transform';
-  var transitionProperty = vendorPrefix + 'Transition';
-  var transitionStyleName = cssPrefix + 'transition';
-  var transitionEndProperty = vendorPrefix.toLowerCase() + 'TransitionEnd';
-
-  var getTranslate = function(element) {
-    var result = { left: 0, top: 0 };
-    if (element === null || element.style === null) return result;
-
-    var transform = element.style[transformProperty];
-    var matches = /translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/ig.exec(transform);
-    if (matches) {
-      result.left = +matches[1];
-      result.top = +matches[3];
-    }
-
-    return result;
-  };
-
-  var translateElement = function(element, x, y) {
-    if (x === null && y === null) return;
-
-    if (element === null || element === undefined || element.style === null) return;
-
-    if (!element.style[transformProperty] && x === 0 && y === 0) return;
-
-    if (x === null || y === null) {
-      var translate = getTranslate(element);
-      if (x === null) {
-        x = translate.left;
-      }
-      if (y === null) {
-        y = translate.top;
-      }
-    }
-
-    cancelTranslateElement(element);
-    element.style[transformProperty] += ' translate(' + (x ? (x + 'px') : '0px') + ',' + (y ? (y + 'px') : '0px') + ') translateZ(0px)';
-  };
-
-  var cancelTranslateElement = function(element) {
-    if (element === null || element.style === null) return;
-
-    var transformValue = element.style[transformProperty];
-
-    if (transformValue) {
-      transformValue = transformValue.replace(/translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/g, '');
-      element.style[transformProperty] = transformValue;
-    }
-  };
-
-  exportObj = {
-    transformProperty: transformProperty,
-    transformStyleName: transformStyleName,
-    transitionProperty: transitionProperty,
-    transitionStyleName: transitionStyleName,
-    transitionEndProperty: transitionEndProperty,
-    getElementTranslate: getTranslate,
-    translateElement: translateElement,
-    cancelTranslateElement: cancelTranslateElement
-  };
-};
-
-export default exportObj;
-