Use css transitions instead of react-motion

luceracloud · Jan 17, 2016 · 2f9fb64 · 2f9fb64
1 parent ef5ff34
commit 2f9fb64
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 60 deletions.
diff --git a/lib/OffCanvas/OffCanvas.js b/lib/OffCanvas/OffCanvas.js
@@ -50,8 +50,6 @@ var OffCanvas = (0, _radium2.default)(_class = (_temp = _class2 = function (_Com
 	_createClass(OffCanvas, [{
 		key: 'render',
 		value: function render() {
-			var _this2 = this;
-
 			var _props = this.props;
 			var leftWidth = _props.leftWidth;
 			var rightWidth = _props.rightWidth;
@@ -93,34 +91,19 @@ var OffCanvas = (0, _radium2.default)(_class = (_temp = _class2 = function (_Com
 				'div',
 				{ style: styles.container },
 				_react2.default.createElement(
-					_reactMotion.Motion,
-					{ defaultStyle: defaults, style: springs },
-					function (_ref) {
-						var leftWidth = _ref.leftWidth;
-						var rightWidth = _ref.rightWidth;
-						var paddingLeft = _ref.paddingLeft;
-						var paddingRight = _ref.paddingRight;
-
-						return _react2.default.createElement(
-							'div',
-							null,
-							_react2.default.createElement(
-								'div',
-								{ style: sidebarStyles(leftWidth) },
-								_this2.props.leftSidebar
-							),
-							_react2.default.createElement(
-								'div',
-								{ style: mainStyles(paddingLeft, paddingRight) },
-								_this2.props.children
-							),
-							_react2.default.createElement(
-								'div',
-								{ style: auxbarStyles(rightWidth) },
-								_this2.props.rightSidebar
-							)
-						);
-					}
+					'div',
+					{ style: sidebarStyles(this._calculateLeft('width')) },
+					this.props.leftSidebar
+				),
+				_react2.default.createElement(
+					'div',
+					{ style: auxbarStyles(this._calculateRight('width')) },
+					this.props.rightSidebar
+				),
+				_react2.default.createElement(
+					'div',
+					{ style: mainStyles(this._calculateLeft('padding'), this._calculateRight('padding')) },
+					this.props.children
 				)
 			);
 		}
@@ -238,10 +221,11 @@ var styles = {
 		width: 0,
 		height: '100%',
 		position: 'fixed',
-		marginLeft: 0,
+		paddingLeft: 0,
 		float: 'left',
 		zIndex: 1,
-		overflow: 'hidden'
+		overflow: 'hidden',
+		transition: 'width 0.5s ease'
 	},
 	auxbar: {
 		width: 0,
@@ -250,15 +234,16 @@ var styles = {
 		right: 0,
 		float: 'left',
 		zIndex: 1,
-		overflow: 'hidden'
+		overflow: 'hidden',
+		transition: 'width 0.5s ease'
 	},
 	content: {
-		width: '100%',
+		width: 'auto',
 		height: '100%',
-		float: 'left',
 		paddingLeft: 0,
 		zIndex: 0,
 		overflowX: 'hidden',
-		position: 'relative'
+		position: 'relative',
+		transition: 'padding 0.5s ease'
 	}
 };
diff --git a/src/OffCanvas/OffCanvas.js b/src/OffCanvas/OffCanvas.js
@@ -83,24 +83,15 @@ export default class OffCanvas extends Component {
 
 		return (
 			<div style={styles.container}>
-
-				<Motion defaultStyle={defaults} style={springs}>
-					{({ leftWidth, rightWidth, paddingLeft, paddingRight }) => {
-						return (
-							<div>
-								<div style={sidebarStyles(leftWidth)}>
-									{this.props.leftSidebar}
-								</div>
-								<div style={mainStyles(paddingLeft, paddingRight)}>
-									{this.props.children}
-								</div>
-								<div style={auxbarStyles(rightWidth)}>
-									{this.props.rightSidebar}
-								</div>
-							</div>
-						);
-					}}
-				</Motion>
+				<div style={sidebarStyles(this._calculateLeft('width'))}>
+					{this.props.leftSidebar}
+				</div>
+				<div style={auxbarStyles(this._calculateRight('width'))}>
+					{this.props.rightSidebar}
+				</div>
+				<div style={mainStyles(this._calculateLeft('padding'), this._calculateRight('padding'))}>
+					{this.props.children}
+				</div>
 			</div>
 		);
 
@@ -184,10 +175,11 @@ const styles = {
 		width: 0,
 		height: '100%',
 		position: 'fixed',
-		marginLeft: 0,
+		paddingLeft: 0,
 		float: 'left',
 		zIndex: 1,
-		overflow: 'hidden'
+		overflow: 'hidden',
+		transition: 'width 0.5s ease'
 	},
 	auxbar: {
 		width: 0,
@@ -196,15 +188,16 @@ const styles = {
 		right: 0,
 		float: 'left',
 		zIndex: 1,
-		overflow: 'hidden'
+		overflow: 'hidden',
+		transition: 'width 0.5s ease'
 	},
 	content: {
-		width: '100%',
+		width: 'auto',
 		height: '100%',
-		float: 'left',
 		paddingLeft: 0,
 		zIndex: 0,
 		overflowX: 'hidden',
-		position: 'relative'
+		position: 'relative',
+		transition: 'padding 0.5s ease'
 	}
 };