feat: add animatedWithMargin to work with positon fixed

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

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/assets/index/common.less b/assets/index/common.less
@@ -120,13 +120,16 @@
 
   &-content {
     zoom: 1;
+    width: 100%;
 
     .@{tabs-prefix-cls}-tabpane {
       overflow: auto;
     }
 
     &-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/examples/activeKey.js b/examples/activeKey.js
@@ -65,7 +65,7 @@ const Component = React.createClass({
       <h1>Simple Tabs</h1>
       <Tabs
         renderTabBar={() => <ScrollableInkTabBar onTabClick={this.onTabClick}/>}
-        renderTabContent={() => <TabContent/>}
+        renderTabContent={() => <TabContent animatedWithMargin />}
         activeKey={this.state.activeKey}
         onChange={this.onChange}
       >

diff --git a/src/TabContent.js b/src/TabContent.js
@@ -4,11 +4,13 @@ import {
   getTransformByIndex,
   getActiveIndex,
   getTransformPropValue,
+  getMarginStyle,
 } from './utils';
 
 const TabContent = React.createClass({
   propTypes: {
     animated: PropTypes.bool,
+    animatedWithMargin: PropTypes.bool,
     prefixCls: PropTypes.string,
     children: PropTypes.any,
     activeKey: PropTypes.string,
@@ -45,7 +47,7 @@ const TabContent = React.createClass({
     const { props } = this;
     const {
       prefixCls, children, activeKey,
-      tabBarPosition, animated,
+      tabBarPosition, animated, animatedWithMargin,
     } = props;
     let { style } = props;
     const classes = classnames({
@@ -57,9 +59,12 @@ const TabContent = React.createClass({
     if (animated) {
       const activeIndex = getActiveIndex(children, activeKey);
       if (activeIndex !== -1) {
+        const animatedStyle = animatedWithMargin ?
+                getMarginStyle(activeIndex, tabBarPosition) :
+                getTransformPropValue(getTransformByIndex(activeIndex, tabBarPosition));
         style = {
           ...style,
-          ...getTransformPropValue(getTransformByIndex(activeIndex, tabBarPosition)),
+          ...animatedStyle,
         };
       } else {
         style = {

diff --git a/src/utils.js b/src/utils.js
@@ -59,3 +59,10 @@ 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}%`,
+  };
+}