动画切换优化

hyy1115 · hyy1115 · commit a35b6341c8e6 · 2017-05-18T02:05:23.000+08:00
diff --git a/index.html b/index.html
@@ -9,12 +9,15 @@
   <meta name="format-detection" content="telephone=no">
 
   <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="./build/styles.css">
 </head>
 <body>
 <div id="root"></div>
 </body>
 <script>
   document.body.addEventListener('touchstart', function () { });
 </script>
+<script src="./build/manifest.js"></script>
+<script src="./build/vendor.js"></script>
 <script src="./build/app.js"></script>
 </html>
diff --git a/package.json b/package.json
@@ -42,7 +42,6 @@
     "expect": "^1.12.0",
     "express": "^4.15.2",
     "extract-text-webpack-plugin": "^2.1.0",
-    "fastclick": "^1.0.6",
     "file-loader": "^0.8.4",
     "http-proxy-middleware": "^0.17.4",
     "image-webpack-loader": "^3.1.0",
@@ -52,7 +51,6 @@
     "jest-runtime": "^19.0.2",
     "less": "^2.7.1",
     "less-loader": "^2.2.2",
-    "nuka-carousel": "^2.0.1",
     "open": "0.0.5",
     "postcss-loader": "^0.7.0",
     "precss": "^1.4.0",
@@ -65,11 +63,12 @@
     "redux-thunk": "^2.2.0",
     "style-loader": "^0.13.0",
     "url-loader": "^0.5.6",
-    "webpack": "^2.2.1",
+    "webpack": "^2.5.1",
     "webpack-dev-middleware": "^1.2.0",
     "webpack-hot-middleware": "^2.17.1"
   },
   "dependencies": {
+    "fastclick": "^1.0.6",
     "history": "^4.6.1",
     "prop-types": "^15.5.4",
     "react": "^15.5.4",
diff --git a/public/fenxi.png b/public/fenxi.png
diff --git a/public/index.gif b/public/index.gif
diff --git a/public/index.png b/public/index.png
diff --git a/public/store.gif b/public/store.gif
diff --git a/src/app.css b/src/app.css
@@ -33,13 +33,13 @@ a {
 
 /*路由切换动画——改变透明度*/
 .normal-enter {
-    opacity: 1;
+    opacity: 0;
     z-index: 10000;
 }
 
 .normal-enter.normal-enter-active {
     opacity: 1;
-    transition: opacity 0.4s ease-in;
+    transition: all 0.4s ease-in;
 }
 
 .normal-leave {
@@ -54,7 +54,7 @@ a {
 .normal-leave.normal-leave-active {
     opacity: 1;
     transform: translateX(100%);
-    transition: opacity 4s ease-out;
+    transition: all .4s ease-out;
 }
 
 /*路由切换动画——左移动*/
diff --git a/src/appContainer.js b/src/appContainer.js
@@ -1,48 +1,27 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import './app.css'
 import { Route, HashRouter as Router } from 'react-router-dom'
 import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 
 /* application components */
-// 首页组件不需要异步加载
 import HomeContainer from './containers/Home/homeContainer';
-// bundle模型用来异步加载组件
-import Bundle from './bundle';
-// 导入search组件，需要在路径前面加上 bundle-loader?lazy!
 import SearchContainer from './containers/Search/searchContainer';
-
-import BookListContainer from './containers/BookList/bookListContainer'
-
-// 异步加载search组件
-// const Search = () => (
-//     <Bundle load={SearchContainer}>
-//         {(Search) => <Search />}
-//     </Bundle>
-// )
-
-// const BookList = () => (
-//     <Bundle load={BookListContainer}>
-//         {(BookList) => <BookList />}
-//     </Bundle>
-// )
+import BookListContainer from './containers/BookList/bookListContainer';
 
 @connect (state => state)
 export default class AppContainer extends React.Component {
-
-    componentDidMount() {
-        // preloads the rest
-        // Search(() => {})
-    }
     
   render() {
-        console.log('appContainer: ', this.props)
       return (
-          <Router>
+          <Router history={history}>
               <Route render={({ location }) => {
+                  console.log('location.pathname: ', location)
                   let cls = 'normal'
                   if (location.pathname === '/search') {
                       cls = 'left'
+                  } else if (location.pathname.indexOf('bookList') > -1) {
+                      cls = 'left'
                   }
                   return(
                       <CSSTransitionGroup
diff --git a/src/components/Home/bookList.js b/src/components/Home/bookList.js
@@ -20,7 +20,7 @@ export class BookList extends React.Component {
             <Link to={`/bookList/${_id}`} data-id={_id} className="home-book-list">
                 <div className="book-img">
                     <span className="book-index">{index}</span>
-                    <img className="" src={imgUrl} />
+                    <img className="" src="" alt="图片" />
                 </div>
                 <div className="book-contain">
                     <p className="book-title textOverflow-hidden">{title}</p>
diff --git a/src/components/Home/header.js b/src/components/Home/header.js
@@ -15,12 +15,12 @@ export class Header extends React.Component {
     }
 
     render() {
-        const {title, imgUrl, linkTo, bgColor, match} = this.props
+        const {title, imgUrl, linkTo, bgColor} = this.props
         //提供4个接口参数给container做设置，可以不传参。
         return (
             <header className='header' style={bgColor}>
                 {title}
-                <Link to={`${match.url + linkTo}`} className="a_link" >
+                <Link to={linkTo} className="a_link">
                     <img src={imgUrl} className="a_img" />
                 </Link>
             </header>
@@ -33,6 +33,5 @@ Header.propTypes = {
     title: PropTypes.string.isRequired,
     imgUrl: PropTypes.string.isRequired,
     linkTo: PropTypes.string.isRequired,
-    bgColor: PropTypes.object.isRequired,
-    match: PropTypes.object.isRequired
+    bgColor: PropTypes.object.isRequired
 }
diff --git a/src/containers/BookList/bookListContainer.js b/src/containers/BookList/bookListContainer.js
@@ -29,7 +29,6 @@ export default class BookListContainer extends React.Component {
 
     render() {
         const { match } = this.props
-        console.log('bookList: ', this.props)
         return(
             <div className="">
                 bookList
diff --git a/src/containers/Home/homeContainer.js b/src/containers/Home/homeContainer.js
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 
 /*actions*/
 import * as navActions from 'actions/nav';
-import * as bookActions from 'actions/book'
+import * as bookActions from 'actions/book';
 
 /*component*/
 import { Header } from 'components/Home/header';
@@ -59,23 +59,21 @@ export default class HomeContainer extends React.Component {
 
     handleClick() {
         //该函数用来执行组件内部的事件，比如在这里就是nav组件菜单的导航点击事件
-        this.props.history.push('/')
+        // this.props.history.push('/')
     }
 
     render() {
         const { navMain } = this.props.nav
         const { bookDetails } = this.props.books
         //还可以通过自定义样式传递给组件
         let bgClass = { background: '#00bb9c' } //定义一个背景色的变量
-        console.log('home: ', this.props)
         return(
             <div key={this.props.location.pathname}>
                 <Header
                     title="react-redux架构"
                     imgUrl={search}
                     linkTo="search"
                     bgColor={bgClass}
-                    match={this.props.match}
                     // {...this.props}当你需要在container调用子组件内部的属性，需要加上该语句，比如组件内部的ref
                 />
                 <div className="style_div">
diff --git a/src/containers/Search/searchContainer.js b/src/containers/Search/searchContainer.js
@@ -26,19 +26,17 @@ export default class SearchContainer extends React.Component {
     }
 
     componentWillMount() {
-        this.props.receiveHotSearch();
+        this.props.receiveHotSearch()
     }
 
     componentDidMount() {
-        console.log("渲染完成打印");
     }
 
     hotClick(text) {
         console.log(text)
     }
 
     render() {
-        console.log('search：', this.props)
         const { hotData } = this.props.search
 
         return (
diff --git a/src/index.js b/src/index.js
@@ -5,6 +5,7 @@ import { Provider } from 'react-redux';
 import { composeWithDevTools } from 'redux-devtools-extension';
 import thunk from 'redux-thunk';
 import createLogger from 'redux-logger';
+import { Router } from 'react-router';
 import { HashRouter } from 'react-router-dom'
 import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux';
 import AppContainer from './appContainer';
@@ -20,19 +21,24 @@ const logger = createLogger({ collapsed: true });
 
 //解决移动端300毫秒延迟
 FastClick.attach(document.body);
-
-const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(
-    thunk,
-    logger,
-    middleware
-)));
+let store;
+if(process.env.NODE_ENV === 'development') {
+    store = createStore(rootReducer, composeWithDevTools(applyMiddleware(
+        thunk,
+        logger,
+        middleware
+    )));
+} else {
+    store = createStore(rootReducer, composeWithDevTools(applyMiddleware(
+        thunk,
+        middleware
+    )));
+}
 
 const render = (Component) => {
     ReactDOM.render(
         <Provider store={store}>
-            <HashRouter history={history}>
-                <Component />
-            </HashRouter>
+            <Component />
         </Provider>,
         document.getElementById('root')
     );
diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -1,10 +1,9 @@
 import { combineReducers } from 'redux';
-// import { routeReducer } from 'redux-simple-router';
 import { routerReducer } from 'react-router-redux'
 
 import { nav } from './nav';
 import { search } from './search';
-import { books } from './book'
+import { books } from './book';
 
 //注册reducer，每个自定义的reducer都要来这里注册！！！不注册会报错。
 const rootReducer = combineReducers({
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,6 +1,7 @@
 var path = require('path');
 var webpack = require('webpack');
 var autoprefixer = require('autoprefixer');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var precss = require('precss');
 
 //判断当前运行环境是开发模式还是生产模式
@@ -9,7 +10,19 @@ const isPro = nodeEnv === 'production';
 
 console.log("当前运行环境：", isPro ? 'production' : 'development')
 
-var plugins = []
+var plugins = [
+    new ExtractTextPlugin('styles.css'),
+    new webpack.optimize.CommonsChunkPlugin({
+        name: 'vendor',
+        minChunks: function (module) {
+            // 该配置假定你引入的 vendor 存在于 node_modules 目录中
+            return module.context && module.context.indexOf('node_modules') !== -1;
+        }
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+        name: 'manifest' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
+    })
+]
 var app = [
     'babel-polyfill',
     './src/index'
@@ -70,7 +83,9 @@ module.exports = {
             include: path.join(__dirname, 'src')
         }, {
             test: /\.(less|css)$/,
-            use: ["style-loader", "css-loader", "less-loader", "postcss-loader"]
+            use: ExtractTextPlugin.extract({
+                use: ["css-loader", "less-loader", "postcss-loader"]
+            })
         }, {
             test: /\.(png|jpg|gif|md)$/,
             use: ['file-loader?limit=10000&name=[md5:hash:base64:10].[ext]']
