页面切换添加动画效果

weui · Feb 18, 2016 · b88affc · b88affc
1 parent 3917311
commit b88affc
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 84 deletions.
diff --git a/example/app.js b/example/app.js
@@ -6,7 +6,8 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Router, Route} from 'react-router';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import { Router, Route, IndexRoute} from 'react-router';
 import WeUI from '../src/index';
 import 'weui';
 
@@ -21,17 +22,36 @@ import Article from './pages/article/index';
 import ActionSheet from './pages/actionsheet/index';
 import Icons from './pages/icons/index';
 
+class App extends React.Component {
+        render() {
+                return (
+                    <ReactCSSTransitionGroup
+                        component="div"
+                        transitionName="page"
+                        transitionEnterTimeout={500}
+                        transitionLeaveTimeout={500}
+                    >
+                            {React.cloneElement(this.props.children, {
+                                    key: this.props.location.pathname
+                            })}
+                    </ReactCSSTransitionGroup>
+                );
+        }
+}
+
 ReactDOM.render((
     <Router>
-        <Route path="/" component={Home}/>
-        <Route path="button" component={Button}/>
-        <Route path="cell" component={Cell}/>
-        <Route path="toast" component={Toast}/>
-        <Route path="dialog" component={Dialog}/>
-        <Route path="progress" component={Progress}/>
-        <Route path="msg" component={Msg}/>
-        <Route path="article" component={Article}/>
-        <Route path="actionsheet" component={ActionSheet}/>
-        <Route path="icons" component={Icons}/>
+            <Route path="/" component={App}>
+                    <IndexRoute component={Home}/>
+                    <Route path="button" component={Button}/>
+                    <Route path="cell" component={Cell}/>
+                    <Route path="toast" component={Toast}/>
+                    <Route path="dialog" component={Dialog}/>
+                    <Route path="progress" component={Progress}/>
+                    <Route path="msg" component={Msg}/>
+                    <Route path="article" component={Article}/>
+                    <Route path="actionsheet" component={ActionSheet}/>
+                    <Route path="icons" component={Icons}/>
+            </Route>
     </Router>
 ), document.getElementById('container'));
diff --git a/example/component/page.less b/example/component/page.less
@@ -1,11 +1,21 @@
 
-body{
+html, body, .container {
+    height: 100%;
+    overflow: hidden;
+}
+
+body {
     background-color: #FBF9FE;
 }
 
-.page{
+.page {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     background-color: #FBF9FE;
-    .hd{
+    .hd {
         padding: 2em 0;
         .title {
             text-align: center;
@@ -20,15 +30,53 @@ body{
             font-size: 14px;
         }
     }
-    .bd{
-        &.spacing{
+    .bd {
+        &.spacing {
             padding: 0 15px;
         }
     }
 
-    &.cell{
-        .bd{
-            padding-bottom: 15px;
+    &.cell {
+        .bd {
+            padding-bottom: 30px;
+        }
+    }
+
+    &.home {
+        &.page-enter {
+            z-index: 0;
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+            &.page-enter-active {
+
+            }
         }
+        &.page-leave {
+            &.page-leave-active {
+                opacity: 1;
+                transform: translate3d(0, 0, 0);
+            }
+        }
+    }
+}
+
+.page-enter {
+    z-index: 1024;
+    opacity: 0.01;
+    transform: translate3d(100%, 0, 0);
+    transition: all .2s ease;
+    &.page-enter-active {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
     }
 }
+
+.page-leave {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    transition: all .2s ease;
+    &.page-leave-active {
+        opacity: 0.01;
+        transform: translate3d(100%, 0, 0);
+    }
+}
diff --git a/example/index.html b/example/index.html
@@ -6,7 +6,7 @@
     <title>react-weui</title>
 </head>
 <body ontouchstart>
-<div id="container"></div>
+<div class="container" id="container"></div>
 <script src="bundle.js"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,66 +1,67 @@
 {
-  "name": "react-weui",
-  "version": "0.2.0",
-  "description": "weui for react",
-  "main": "./lib",
-  "scripts": {
-    "start": "webpack-dev-server --devtool eval --progress --hot --colors --content-base example",
-    "clean": "rimraf ./lib ./coverage",
-    "build": "npm run clean & babel ./src --out-dir ./lib",
-    "lint": "eslint 'src/**/*.@(js|jsx)'",
-    "pretest": "npm run lint",
-    "test": "mocha --compilers js:babel-core/register --recursive",
-    "test:watch": "npm run test -- --watch",
-    "coverage": "npm run lint & istanbul cover _mocha -- --compilers js:babel-core/register --recursive"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/weui/react-weui.git"
-  },
-  "keywords": [
-    "mobile",
-    "ui",
-    "framework",
-    "weui",
-    "react"
-  ],
-  "author": "wechat ui team",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/weui/react-weui/issues"
-  },
-  "homepage": "https://github.com/weui/react-weui",
-  "dependencies": {
-    "classnames": "^2.2.0",
-    "history": "^1.17.0",
-    "react": "^0.14.2"
-  },
-  "devDependencies": {
-    "autoprefixer-loader": "^3.1.0",
-    "babel": "^5.8.23",
-    "babel-core": "^5.8.23",
-    "babel-eslint": "^4.1.6",
-    "babel-loader": "^5.3.2",
-    "css-loader": "^0.23.0",
-    "enzyme": "^1.1.0",
-    "eslint": "^1.10.3",
-    "eslint-plugin-react": "^3.11.3",
-    "file-loader": "^0.8.5",
-    "istanbul": "^0.4.1",
-    "less": "^2.5.3",
-    "less-loader": "^2.2.1",
-    "mocha": "^2.3.4",
-    "open-browser-webpack-plugin": "0.0.1",
-    "react-addons-test-utils": "^0.14.3",
-    "react-dom": "^0.14.2",
-    "react-router": "^1.0.2",
-    "rimraf": "^2.4.3",
-    "sinon": "^1.17.2",
-    "style-loader": "^0.13.0",
-    "uglify-loader": "^1.2.0",
-    "url-loader": "^0.5.7",
-    "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.12.1",
-    "weui": "^0.3.0"
-  }
+    "name": "react-weui",
+    "version": "0.2.0",
+    "description": "weui for react",
+    "main": "./lib",
+    "scripts": {
+        "start": "webpack-dev-server --devtool eval --progress --hot --colors --content-base example",
+        "clean": "rimraf ./lib ./coverage",
+        "build": "npm run clean & babel ./src --out-dir ./lib",
+        "lint": "eslint 'src/**/*.@(js|jsx)'",
+        "pretest": "npm run lint",
+        "test": "mocha --compilers js:babel-core/register --recursive",
+        "test:watch": "npm run test -- --watch",
+        "coverage": "npm run lint & istanbul cover _mocha -- --compilers js:babel-core/register --recursive"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/weui/react-weui.git"
+    },
+    "keywords": [
+        "mobile",
+        "ui",
+        "framework",
+        "weui",
+        "react"
+    ],
+    "author": "wechat ui team",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/weui/react-weui/issues"
+    },
+    "homepage": "https://github.com/weui/react-weui",
+    "dependencies": {
+        "classnames": "^2.2.0",
+        "history": "^1.17.0",
+        "react": "^0.14.2"
+    },
+    "devDependencies": {
+        "autoprefixer-loader": "^3.1.0",
+        "babel": "^5.8.23",
+        "babel-core": "^5.8.23",
+        "babel-eslint": "^4.1.6",
+        "babel-loader": "^5.3.2",
+        "css-loader": "^0.23.0",
+        "enzyme": "^1.1.0",
+        "eslint": "^1.10.3",
+        "eslint-plugin-react": "^3.11.3",
+        "file-loader": "^0.8.5",
+        "istanbul": "^0.4.1",
+        "less": "^2.5.3",
+        "less-loader": "^2.2.1",
+        "mocha": "^2.3.4",
+        "open-browser-webpack-plugin": "0.0.1",
+        "react-addons-css-transition-group": "^0.14.7",
+        "react-addons-test-utils": "^0.14.3",
+        "react-dom": "^0.14.2",
+        "react-router": "^1.0.2",
+        "rimraf": "^2.4.3",
+        "sinon": "^1.17.2",
+        "style-loader": "^0.13.0",
+        "uglify-loader": "^1.2.0",
+        "url-loader": "^0.5.7",
+        "webpack": "^1.12.2",
+        "webpack-dev-server": "^1.12.1",
+        "weui": "^0.3.0"
+    }
 }