some changes

start-react · Nov 3, 2015 · 403b8e5 · 403b8e5
1 parent f5e2323
commit 403b8e5
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -67,6 +67,7 @@
     "postcss-nested": "^1.0.0",
     "react": "^0.14.0",
     "react-addons-css-transition-group": "^0.14.1",
+    "react-addons-transition-group": "^0.14.2",
     "react-bootstrap": "^0.27.0",
     "react-dom": "^0.14.1",
     "react-router": "^1.0.0-rc2",

diff --git a/src/app.jsx b/src/app.jsx
@@ -6,14 +6,13 @@ import "./common/styles/app.less";
 import NProgress from 'nProgress';
 
 NProgress.configure({ showSpinner: false });
-// NProgress.configure({ parent: 'body' });
 
 const history = useBasename(createHistory)({
   basename: '#/ani-react'
 })
 
 const rootRoute = {
-  component: 'div',
+  component: require('./components/layouts/Base'),
   childRoutes: [ {
       component: require('./components/layouts/Dashboard'),
       childRoutes: [

diff --git a/src/common/styles/transitions/pages.less b/src/common/styles/transitions/pages.less
@@ -3,22 +3,21 @@ to prevent collapsing during animation*/
 /*.well.ui-view{
  height: 65px; 
 }*/
-.ui-view-main {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-}
+// .ui-view-main {
+//   position: absolute;
+//   left: 0;
+//   right: 0;
+//   bottom: 0;
+//   top: 0;
+// }
 .ui-view {
   position: absolute;
   bottom: 0;
   top: 0;
-  left: 20px;
-  right: 20px;
-  text-align: center;
-  animation-name: page;
-  animation-duration: 0.5s;
+  left: 0;
+  right: 0;
+  // padding: 20px;
+  // text-align: center;
 }
 
 .ui-view-container {
@@ -62,8 +61,3 @@ to prevent collapsing during animation*/
   -moz-transform:translate3d(0, 0, 0);
   transform:translate3d(0, 0, 0);
 }
-
-@keyframes page {
-  from {top:20px; left:40px; right:40px;}
-  to {top:0px; left:20px; right:20px;}
-}
diff --git a/src/components/layouts/Base.jsx b/src/components/layouts/Base.jsx
@@ -1,12 +1,23 @@
 import React from "react";
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+
 import { Route, DefaultRoute, RouteHandler } from "react-router";
 
 var Base = React.createClass({
 
   render: function() {
+	const { pathname } = this.props.location;
+	console.log("base", pathname);
   	return (
       <div id="container">
-        <RouteHandler {...this.props} />
+      	<ReactCSSTransitionGroup component="div"
+                         transitionName="ng"
+                         transitionEnterTimeout={500}
+                         transitionLeaveTimeout={300}
+        >
+          {React.cloneElement(this.props.children || <div />, { key: pathname })}
+        </ReactCSSTransitionGroup>
+
       </div>
     );
   }

diff --git a/src/components/layouts/Dashboard/index.jsx b/src/components/layouts/Dashboard/index.jsx
@@ -17,7 +17,6 @@ var HomePage = React.createClass({
   },
 
   componentWillUnmount: function(){
-
     $(window).unbind('resize',this.adjustResize);
 
   },
@@ -49,7 +48,7 @@ var HomePage = React.createClass({
     var title = <span><a href="http://startreact.com/" title="Start React" rel="home"><img src="http://startreact.com/wp-content/themes/dazzling-child/images/logo.png" alt="Start React" title="Start React" height="35px" />&nbsp;SB Admin React - StartReact.com</a></span>;
 
     return (
-        <div className="dashboard-page"> 
+        <div className="dashboard-page ui-view"> 
           <div className="container-fluid"> 
             <div className="row"> 
               <div className="col-sm-3 col-md-2 sidebar"> 
@@ -74,20 +73,19 @@ var HomePage = React.createClass({
               </div>
 
               <div className="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main ng-scope ui-view-main">
-                <ReactCSSTransitionGroup component="div"
+               <ReactCSSTransitionGroup component="div"
                                  transitionName="ng"
                                  transitionEnterTimeout={500}
                                  transitionLeaveTimeout={300}
                 >
                   {React.cloneElement(this.props.children || <div />, { key: pathname })}
                 </ReactCSSTransitionGroup>
-              
+
 
               </div> 
             </div> 
           </div> 
         </div>
-
     );
   },
 

diff --git a/src/components/pages/Login.jsx b/src/components/pages/Login.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 import Router from 'react-router';
 import {Panel, Input, Button} from 'react-bootstrap';
 import { History } from 'history';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import $ from "jQuery";
 
 var LoginPage = React.createClass({
 
@@ -17,9 +19,8 @@ var LoginPage = React.createClass({
 
   render: function(){
 
-    return <div>
-
-        <div className="login-page ng-scope"> 
+    return(
+        <div className="login-page ng-scope ui-view"> 
           <div className="row"> 
             <div className="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4"> 
               <img src={require("../../common/images/flat-avatar.png")} className="user-avatar" /> 
@@ -38,8 +39,8 @@ var LoginPage = React.createClass({
             </div> 
           </div> 
         </div>
-        
-      </div>
+
+    );
 
 
   },