opti: 首页添加动画，修改header

client/Application.js

@@ -5,6 +5,7 @@ import { Route, HashRouter } from 'react-router-dom'
 import { Home, ProjectGroups, Interface, News, AddInterface } from './containers/index'
 import User from './containers/User/User.js'
 import Header from './components/Header/Header'
+import Loading from './components/Loading/Loading'
 import { checkLoginState } from './actions/login'
 import { requireAuthentication } from './components/AuthenticatedComponent';
 
@@ -38,7 +39,7 @@ export default class App extends Component {
   route = (status) => {
     let r;
     if (status === LOADING_STATUS) {
-      return <span>loading...</span>
+      return <Loading visible/>
     } else {
       r = (
         <HashRouter>

client/components/Header/Header.js

@@ -129,7 +129,7 @@ class HeaderCom extends Component {
           <Header>
             <div className="content">
               <div className="logo">
-                YAPI
+                <Link to="/" onClick={this.relieveLink}>YAPI</Link>
               </div>
               <Menu
                 mode="horizontal"
@@ -139,17 +139,8 @@ class HeaderCom extends Component {
                 onClick={this.linkTo}
                 selectedKeys={[curKey]}
               >
-                <Menu.Item key="/">
-                  <Link to="/">首页</Link>
-                </Menu.Item>
                 <Menu.Item key="/ProjectGroups">
-                  <Link to="/ProjectGroups">分组</Link>
+                  <Link to="/ProjectGroups">项目广场</Link>
-                </Menu.Item>
-                <Menu.Item key="/Interface">
-                  <Link to="/Interface">接口</Link>
-                </Menu.Item>
-                <Menu.Item key="/doc">
-                  <a>文档</a>
                 </Menu.Item>
               </Menu>
               <div className="user-toolbar">

client/components/Intro/Intro.js

@@ -1,7 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Row, Col, Icon } from 'antd'
+import { Col, Icon } from 'antd'
 import "./Intro.scss"
+import { OverPack } from 'rc-scroll-anim'
+import TweenOne from 'rc-tween-one'
+import QueueAnim from 'rc-queue-anim';
 
 const IntroPart = (props) =>(
   <Col span={12} className="switch-content">
@@ -33,22 +36,42 @@ class Intro extends React.Component{
         title:PropTypes.string,
         des:PropTypes.string
       }))
-    })
+    }),
+    className : PropTypes.string
   }
   render(){
-    const { intro } = this.props;
+    const {  intro } = this.props;
+    const id = "motion";
+    const animType = {
+      queue: 'right',
+      one: { x: '-=30', opacity: 0, type: 'from' }
+    };
     return(
       <div className="intro-container">
-        <Row>
+        <OverPack
-          <Col span={12}>
+          playScale="0.3"
-            <div>
+        >
-              <div className="img-container">
+          <TweenOne
-                <img src={intro.img}/>
+            animation={animType.one}
-              </div>
+            key={`${id}-img`}
+            resetStyleBool
+            id={`${id}-imgWrapper`}
+            className="imgWrapper"
+          >
+            <div className="img-container" id={`${id}-img-container`}>
+              <img src={intro.img}/>
             </div>
-          </Col>
+          </TweenOne>
-          <Col span={12} className="des-container">
+
-            <div>
+          <QueueAnim
+            type={animType.queue}
+            key={`${id}-text`}
+            leaveReverse
+            ease={['easeOutCubic', 'easeInCubic']}
+            id={`${id}-textWrapper`}
+            className={`${id}-text des-container textWrapper`}
+          >
+            <div key={`${id}-des-content`}>
               <div className="des-title">
                 {intro.title}
               </div>
@@ -56,13 +79,13 @@ class Intro extends React.Component{
                 {intro.des}
               </div>
             </div>
-            <div className="des-switch">
+            <div className="des-switch" key={`${id}-des-switch`}>
               {intro.detail.map(function(item,i){
                 return(<IntroPart key={i} title={item.title} des={item.des}/>)
               })}
             </div>
-          </Col>
+          </QueueAnim>
-        </Row>
+        </OverPack>
       </div>
     )
   }

client/components/Intro/Intro.scss

@@ -4,6 +4,22 @@ $color-blue : #108ee9;
 $color-white: #fff;
 
 .intro-container{
+  .imgWrapper{
+    height: 100%;
+    width: 50%;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+  }
+  .textWrapper{
+    display: block;
+    width: 50%;
+    height: 150px;
+    vertical-align: top;
+    position: absolute;
+    margin: auto;
+    right: 0;
+  }
   .des-container{
     padding-left: .15rem;
     .des-title{

client/containers/Home/Home.js

@@ -2,13 +2,17 @@ import './Home.scss'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
-import { Row, Col, Button } from 'antd'
+import { Row, Col, Button, Icon } from 'antd'
 import PropTypes from "prop-types"
 import Login from '../Login/LoginWrap'
 import Intro from '../../components/Intro/Intro'
-import Footer from "../../components/Footer/Footer";
 import { changeMenuItem } from '../../actions/menu'
+import { OverPack } from 'rc-scroll-anim'
+import TweenOne from 'rc-tween-one'
 
+
+const oneAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad' };
+const queueAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad','delay':200 };
 const HomeGuest = (props) => (
   <div>
     <div className="main-one">
@@ -17,7 +21,7 @@ const HomeGuest = (props) => (
           <Col span={24}>
             <div className="home-des">
               <p className="title">YAPI</p>
-              <div className="detail">一个高效，易用，功能强大的api管理系统</div>
+              <div className="detail">一个高效，易用，可部署的Api管理系统</div>
             </div>
           </Col>
         </Row>
@@ -33,9 +37,55 @@ const HomeGuest = (props) => (
         </Row>
       </div>
     </div>
+    <div className="feat-part">
+      <div className="container">
+        <OverPack
+          playScale="0.3"
+        >
+          <TweenOne
+            key="h3"
+            animation={oneAnim}
+            component="h3"
+          >
+            <span>特性</span>
+          </TweenOne>
+          <TweenOne
+            animation={queueAnim}
+            reverseDelay={200}
+          >
+            <Row>
+              <Col span={8} className="feat-wrapper">
+                <div className="feat-img">
+                  <Icon type="api" />
+                </div>
+                <p className="feat-title">
+                  接口管理
+                </p>
+              </Col>
+              <Col span={8} className="feat-wrapper">
+                <div className="feat-img">
+                  <Icon type="link" />
+                </div>
+                <p className="feat-title">
+                  支持Mock
+                </p>
+              </Col>
+              <Col span={8} className="feat-wrapper">
+                <div className="feat-img">
+                  <Icon type="team" />
+                </div>
+                <p className="feat-title">
+                  团队协作
+                </p>
+              </Col>
+            </Row>
+          </TweenOne>
+        </OverPack>
+      </div>
+    </div>
     { props.introList.map(function(intro,i){
       return (
-        <div className="main-part" key={i}>
+        <div className="main-part" key={i} id={`main-part-${i}`}>
           <div className="container">
             <Intro intro={intro}/>
           </div>
@@ -88,7 +138,6 @@ class Home extends Component {
             </div>
           )
           : <HomeGuest introList={this.props.introList}/>}
-        <Footer/>
       </div>
     )
   }

client/containers/Home/Home.scss

@@ -2,18 +2,20 @@
 
 $color-white : #fff;
 $color-blue-lighter : #f1f5ff;
+$color-blue-grey-lighter : #f7fafc;
 $color-grey-lighter : #F7F7F7;
 $color-blue-light: #5dade2;
 $color-black-lighter: #404040;
 
 
 .home-main {
-  height:calc(100% - .64rem);
+  min-height:calc(100% - 2.23rem);
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  background: $color-grey-lighter;
+  background: $color-blue-grey-lighter;
   .main-one{
     padding: .5rem .5rem 0 .5rem;
+    //height: 7.16rem;
     //background: radial-gradient(ellipse at center,#45484d 0%,#000 100%);
     .home-des{
       padding: 0 .3rem .3rem 0;
@@ -45,9 +47,9 @@ $color-black-lighter: #404040;
   .user-home{
     display: flex;
     align-items: center;
-    height:calc(100% - 2rem);
+    height: 100%;
     max-width: 11rem;
-    margin: 0 auto;
+    margin: 1rem auto 0;
     .user-des{
       max-width: 11rem;
       margin: 0 auto .5rem;
@@ -72,6 +74,7 @@ $color-black-lighter: #404040;
   }
   .main-part{
     padding: .9rem .5rem;
+    height: 5.8rem;
     &:nth-child(odd){
       background-color: $color-blue-lighter;
     }
@@ -79,9 +82,73 @@ $color-black-lighter: #404040;
       background-color: $color-white;
     }
   }
+  .feat-part{
+    padding: .9rem .5rem;
+    background-color: $color-white;
+    h3{
+      display: flex;
+      height: .3rem;
+      align-items: center;
+      padding: 0 .1rem;
+      margin-bottom: .2rem;
+      color: #333;
+      &:before, &:after{
+        content: "";
+        display: inline-block;
+        height: .02rem;
+        flex: 1;
+        border-top: .01rem solid #e6e6e6;
+      }
+      span{
+        font-size: .24rem;
+        padding: 0 .1rem;
+        font-weight: normal;
+      }
+    }
+  }
   .container{
     max-width: 11rem;
     margin: 0 auto;
+    height:100%;
+    position: relative;
+  }
+  .feat-wrapper{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    .feat-img{
+      height: 1.2rem;
+      width: 1.2rem;
+      border-radius: 100%;
+      margin-bottom: .2rem;
+      color: $color-white;
+      i{
+        line-height: 1.2rem;
+        font-size: .6rem;
+      }
+    }
+    .feat-title{
+      font-size: .16rem;
+      line-height: .3rem;
+      color: #333;
+    }
+    &:first-child{
+      .feat-img{
+        background-color: rgb(248, 88, 96);
+      }
+    }
+    &:nth-child(2){
+      .feat-img{
+        background-color: #f9bb13;
+      }
+    }
+    &:nth-child(3){
+      .feat-img{
+        background-color: #20ab8e;
+      }
+    }
   }
 }
 

client/reducer/menu/menu.js

@@ -3,7 +3,7 @@ import {
 } from '../../constants/action-types.js'
 
 const initialState = {
-  curKey: window.location.hash.split("#")[1] || '/'
+  curKey: window.location.hash.split("#")[1] || ''
 }
 
 export default (state = initialState, action) => {

package.json

@@ -37,6 +37,8 @@
     "node-sass-china": "^4.5.0",
     "nodemailer": "^4.0.1",
     "prop-types": "^15.5.10",
+    "rc-queue-anim": "^1.2.0",
+    "rc-scroll-anim": "^1.0.7",
     "redux": "^3.7.1",
     "redux-promise": "^0.5.3",
     "redux-thunk": "^2.2.0",