1. 官方方法(推荐)
https://github.com/reactjs/react-router/tree/master/examples/animations
//--js
import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
class App extends React.Component {
render() {
return (
<div className="app">
<ReactCSSTransitionGroup
component="div"
className="transition-wrapper"
transitionName="example"
transitionEnterTimeout={500}
transitionLeaveTimeout={500}>
//注意这一部分很关键,不能直接使用{this.props.children}
{React.cloneElement(this.props.children, {
key: this.props.location.pathname
})}
</ReactCSSTransitionGroup>
</div>
);
}
}
module.exports = App;
//--css
.example-enter {
opacity: 0.01;
transition: opacity .5s ease-in;
}
.example-enter.example-enter-active {
opacity: 1;
}
.example-leave {
opacity: 1;
transition: opacity .5s ease-in;
}
.example-leave.example-leave-active {
opacity: 0;
}
.transition-wrapper {
height: 100%;
}
2. react-router-transition
https://github.com/maisano/react-router-transition
1. 安装
npm install --save react-router-transition
2. 使用
//--js
import React from 'react';
import RouteTransition from 'react-router-transition';
class App extends React.Component {
render() {
return (
<div className="app">
<RouteTransition
pathname={this.props.location.pathname}
atEnter={{ opacity: 0 }}
atLeave={{ opacity: 0 }}
atActive={{ opacity: 1 }}
className="transition-wrapper">
{this.props.children}
</RouteTransition>
</div>
);
}
}
module.exports = App;
//--css
html,
body,
#root,
.app,
.transition-wrapper,
.transition-wrapper>div {
height: 100%;
}
//--生成的html结构
<div class='transition-wrapper'>
<div style='opacity: 1'>
<div class='app'>
...
</div>
</div>
</div>
3. 模块打包问题
目前npm
上的react-router-transition
模块有问题,package.json
配置的入口文件为lib/react-router-transition.js
,该文件为webpack
编译打包后的文件,不能再次打包,所以实际使用时需要导入src/RouteTransition.js
文件,结合webpack.config.js
配置如下:
var node_modules_dir = path.join(__dirname, 'node_modules');
resolve: {
extensions: ['', '.js', 'jsx'],
alias: {
'react-router-transition': path.resolve(node_modules_dir,'react-router-transition/src/RouteTransition.jsx')
}
}
参考
Animated transitions
maisano/react-router-transition
misterfresh/react-easy-transition
reactjs/react-router
react + react-router transition
What is the correct way to animate/transition between routes in react router
网友评论