使用React过渡组v2进行路由动画过渡
使用React过渡组v2进行路由动画过渡
提问于 2017-10-23 18:29:40
如何使用react-transition-group-v2和react-router-v4在enter上为子节点设置动画？例如，我们有包含3个子div节点的About组件。
class About extends React.Component {
render() {
return (
<div>
<div>About</div>
<div>About</div>
<div>About</div>
</div>
);
}
}如何动画的每一个<div>About</div>的过渡。我已经试着替换了<Route path="/about" component={About} />
function FirstChild(props) {
const childrenArray = React.Children.toArray(props.children);
return childrenArray[0] || null;
}
...
<Route path="/about"
children={({ match, ...rest }) => (
<TransitionGroup component={FirstChild}>
{match && <About {...rest} />}
</TransitionGroup>
)}
/>但是我不明白如何在每个<div>中添加onEnter回调。示例：https://codesandbox.io/s/n0566q62lj
回答 1
Stack Overflow用户
发布于 2017-10-23 19:16:46
我认为，你应该尝试componentDidMount +简单的css过渡
class About extends React.Component {
componentDidMount(){
this.container.classList.add('run-animation');
}
render() {
return (
<div ref={ el => this.container = el }>
<div className="item">About</div>
<div className="item">About</div>
<div className="item">About</div>
</div>
);
}
}
.item{
transition: opacity .3s ease;
opacity: 0;
}
.item:nth-child(1){
transition-delay: .3s;
}
.item:nth-child(2){
transition-delay: .6s;
}
.item:nth-child(3){
transition-delay: .9s;
}
.run-animation .item{
opacity: 1;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46887199
复制相关文章
相似问题
腾讯云开发者
