refactor: implement animation with margin

react-component · Dec 6, 2016 · 13d4095 · 13d4095
1 parent 6b895e1
commit 13d4095
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/assets/index/common.less b/assets/index/common.less
@@ -126,7 +126,9 @@
     }
 
     &-animated {
-      transition: transform @effect-duration @easing-in-out;
+      transition: transform @effect-duration @easing-in-out,
+                  margin-left @effect-duration @easing-in-out,
+                  margin-top @effect-duration @easing-in-out;
       display: flex;
       will-change: transform;
 

diff --git a/src/TabContent.js b/src/TabContent.js
@@ -1,9 +1,8 @@
 import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import {
-  getTransformByIndex,
   getActiveIndex,
-  getTransformPropValue,
+  getMarginStyle,
 } from './utils';
 
 const TabContent = React.createClass({
@@ -59,7 +58,7 @@ const TabContent = React.createClass({
       if (activeIndex !== -1) {
         style = {
           ...style,
-          ...getTransformPropValue(getTransformByIndex(activeIndex, tabBarPosition)),
+          ...getMarginStyle(activeIndex, tabBarPosition),
         };
       } else {
         style = {

diff --git a/src/utils.js b/src/utils.js
@@ -59,3 +59,11 @@ export function getTransformByIndex(index, tabBarPosition) {
   const translate = isVertical(tabBarPosition) ? 'translateY' : 'translateX';
   return `${translate}(${-index * 100}%) translateZ(0)`;
 }
+
+export function getMarginStyle(index, tabBarPosition) {
+  const marginDirection = isVertical(tabBarPosition) ? 'marginTop' : 'marginLeft';
+  return {
+    [marginDirection]: `${-index * 100}%`,
+    width: '100%',
+  };
+}