Skip to content

Commit b88affc

Browse files
prograpeprogrape
committed
页面切换添加动画效果
1 parent 3917311 commit b88affc

File tree

4 files changed

+153
-84
lines changed

4 files changed

+153
-84
lines changed

‎example/app.js

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66

77
import React from 'react';
88
import ReactDOM from 'react-dom';
9-
import { Router, Route} from 'react-router';
9+
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
10+
import { Router, Route, IndexRoute} from 'react-router';
1011
import WeUI from '../src/index';
1112
import 'weui';
1213

@@ -21,17 +22,36 @@ import Article from './pages/article/index';
2122
import ActionSheet from './pages/actionsheet/index';
2223
import Icons from './pages/icons/index';
2324

25+
class App extends React.Component {
26+
render() {
27+
return (
28+
<ReactCSSTransitionGroup
29+
component="div"
30+
transitionName="page"
31+
transitionEnterTimeout={500}
32+
transitionLeaveTimeout={500}
33+
>
34+
{React.cloneElement(this.props.children, {
35+
key: this.props.location.pathname
36+
})}
37+
</ReactCSSTransitionGroup>
38+
);
39+
}
40+
}
41+
2442
ReactDOM.render((
2543
<Router>
26-
<Route path="/" component={Home}/>
27-
<Route path="button" component={Button}/>
28-
<Route path="cell" component={Cell}/>
29-
<Route path="toast" component={Toast}/>
30-
<Route path="dialog" component={Dialog}/>
31-
<Route path="progress" component={Progress}/>
32-
<Route path="msg" component={Msg}/>
33-
<Route path="article" component={Article}/>
34-
<Route path="actionsheet" component={ActionSheet}/>
35-
<Route path="icons" component={Icons}/>
44+
<Route path="/" component={App}>
45+
<IndexRoute component={Home}/>
46+
<Route path="button" component={Button}/>
47+
<Route path="cell" component={Cell}/>
48+
<Route path="toast" component={Toast}/>
49+
<Route path="dialog" component={Dialog}/>
50+
<Route path="progress" component={Progress}/>
51+
<Route path="msg" component={Msg}/>
52+
<Route path="article" component={Article}/>
53+
<Route path="actionsheet" component={ActionSheet}/>
54+
<Route path="icons" component={Icons}/>
55+
</Route>
3656
</Router>
3757
), document.getElementById('container'));

‎example/component/page.less

Lines changed: 56 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,21 @@
11

2-
body{
2+
html, body, .container {
3+
height: 100%;
4+
overflow: hidden;
5+
}
6+
7+
body {
38
background-color: #FBF9FE;
49
}
510

6-
.page{
11+
.page {
12+
position: absolute;
13+
top: 0;
14+
right: 0;
15+
bottom: 0;
16+
left: 0;
717
background-color: #FBF9FE;
8-
.hd{
18+
.hd {
919
padding: 2em 0;
1020
.title {
1121
text-align: center;
@@ -20,15 +30,53 @@ body{
2030
font-size: 14px;
2131
}
2232
}
23-
.bd{
24-
&.spacing{
33+
.bd {
34+
&.spacing {
2535
padding: 0 15px;
2636
}
2737
}
2838

29-
&.cell{
30-
.bd{
31-
padding-bottom: 15px;
39+
&.cell {
40+
.bd {
41+
padding-bottom: 30px;
42+
}
43+
}
44+
45+
&.home {
46+
&.page-enter {
47+
z-index: 0;
48+
opacity: 1;
49+
transform: translate3d(0, 0, 0);
50+
&.page-enter-active {
51+
52+
}
3253
}
54+
&.page-leave {
55+
&.page-leave-active {
56+
opacity: 1;
57+
transform: translate3d(0, 0, 0);
58+
}
59+
}
60+
}
61+
}
62+
63+
.page-enter {
64+
z-index: 1024;
65+
opacity: 0.01;
66+
transform: translate3d(100%, 0, 0);
67+
transition: all .2s ease;
68+
&.page-enter-active {
69+
opacity: 1;
70+
transform: translate3d(0, 0, 0);
3371
}
3472
}
73+
74+
.page-leave {
75+
opacity: 1;
76+
transform: translate3d(0, 0, 0);
77+
transition: all .2s ease;
78+
&.page-leave-active {
79+
opacity: 0.01;
80+
transform: translate3d(100%, 0, 0);
81+
}
82+
}

‎example/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>react-weui</title>
77
</head>
88
<body ontouchstart>
9-
<div id="container"></div>
9+
<div class="container" id="container"></div>
1010
<script src="bundle.js"></script>
1111
</body>
1212
</html>

‎package.json

Lines changed: 65 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,67 @@
11
{
2-
"name": "react-weui",
3-
"version": "0.2.0",
4-
"description": "weui for react",
5-
"main": "./lib",
6-
"scripts": {
7-
"start": "webpack-dev-server --devtool eval --progress --hot --colors --content-base example",
8-
"clean": "rimraf ./lib ./coverage",
9-
"build": "npm run clean & babel ./src --out-dir ./lib",
10-
"lint": "eslint 'src/**/*.@(js|jsx)'",
11-
"pretest": "npm run lint",
12-
"test": "mocha --compilers js:babel-core/register --recursive",
13-
"test:watch": "npm run test -- --watch",
14-
"coverage": "npm run lint & istanbul cover _mocha -- --compilers js:babel-core/register --recursive"
15-
},
16-
"repository": {
17-
"type": "git",
18-
"url": "git+https://github.com/weui/react-weui.git"
19-
},
20-
"keywords": [
21-
"mobile",
22-
"ui",
23-
"framework",
24-
"weui",
25-
"react"
26-
],
27-
"author": "wechat ui team",
28-
"license": "MIT",
29-
"bugs": {
30-
"url": "https://github.com/weui/react-weui/issues"
31-
},
32-
"homepage": "https://github.com/weui/react-weui",
33-
"dependencies": {
34-
"classnames": "^2.2.0",
35-
"history": "^1.17.0",
36-
"react": "^0.14.2"
37-
},
38-
"devDependencies": {
39-
"autoprefixer-loader": "^3.1.0",
40-
"babel": "^5.8.23",
41-
"babel-core": "^5.8.23",
42-
"babel-eslint": "^4.1.6",
43-
"babel-loader": "^5.3.2",
44-
"css-loader": "^0.23.0",
45-
"enzyme": "^1.1.0",
46-
"eslint": "^1.10.3",
47-
"eslint-plugin-react": "^3.11.3",
48-
"file-loader": "^0.8.5",
49-
"istanbul": "^0.4.1",
50-
"less": "^2.5.3",
51-
"less-loader": "^2.2.1",
52-
"mocha": "^2.3.4",
53-
"open-browser-webpack-plugin": "0.0.1",
54-
"react-addons-test-utils": "^0.14.3",
55-
"react-dom": "^0.14.2",
56-
"react-router": "^1.0.2",
57-
"rimraf": "^2.4.3",
58-
"sinon": "^1.17.2",
59-
"style-loader": "^0.13.0",
60-
"uglify-loader": "^1.2.0",
61-
"url-loader": "^0.5.7",
62-
"webpack": "^1.12.2",
63-
"webpack-dev-server": "^1.12.1",
64-
"weui": "^0.3.0"
65-
}
2+
"name": "react-weui",
3+
"version": "0.2.0",
4+
"description": "weui for react",
5+
"main": "./lib",
6+
"scripts": {
7+
"start": "webpack-dev-server --devtool eval --progress --hot --colors --content-base example",
8+
"clean": "rimraf ./lib ./coverage",
9+
"build": "npm run clean & babel ./src --out-dir ./lib",
10+
"lint": "eslint 'src/**/*.@(js|jsx)'",
11+
"pretest": "npm run lint",
12+
"test": "mocha --compilers js:babel-core/register --recursive",
13+
"test:watch": "npm run test -- --watch",
14+
"coverage": "npm run lint & istanbul cover _mocha -- --compilers js:babel-core/register --recursive"
15+
},
16+
"repository": {
17+
"type": "git",
18+
"url": "git+https://github.com/weui/react-weui.git"
19+
},
20+
"keywords": [
21+
"mobile",
22+
"ui",
23+
"framework",
24+
"weui",
25+
"react"
26+
],
27+
"author": "wechat ui team",
28+
"license": "MIT",
29+
"bugs": {
30+
"url": "https://github.com/weui/react-weui/issues"
31+
},
32+
"homepage": "https://github.com/weui/react-weui",
33+
"dependencies": {
34+
"classnames": "^2.2.0",
35+
"history": "^1.17.0",
36+
"react": "^0.14.2"
37+
},
38+
"devDependencies": {
39+
"autoprefixer-loader": "^3.1.0",
40+
"babel": "^5.8.23",
41+
"babel-core": "^5.8.23",
42+
"babel-eslint": "^4.1.6",
43+
"babel-loader": "^5.3.2",
44+
"css-loader": "^0.23.0",
45+
"enzyme": "^1.1.0",
46+
"eslint": "^1.10.3",
47+
"eslint-plugin-react": "^3.11.3",
48+
"file-loader": "^0.8.5",
49+
"istanbul": "^0.4.1",
50+
"less": "^2.5.3",
51+
"less-loader": "^2.2.1",
52+
"mocha": "^2.3.4",
53+
"open-browser-webpack-plugin": "0.0.1",
54+
"react-addons-css-transition-group": "^0.14.7",
55+
"react-addons-test-utils": "^0.14.3",
56+
"react-dom": "^0.14.2",
57+
"react-router": "^1.0.2",
58+
"rimraf": "^2.4.3",
59+
"sinon": "^1.17.2",
60+
"style-loader": "^0.13.0",
61+
"uglify-loader": "^1.2.0",
62+
"url-loader": "^0.5.7",
63+
"webpack": "^1.12.2",
64+
"webpack-dev-server": "^1.12.1",
65+
"weui": "^0.3.0"
66+
}
6667
}

0 commit comments

Comments
 (0)