我想为React路由器创建一个过渡动画,但它似乎不起作用(没有过渡)。
正如你在下面看到的,我所做的就是创建一个组件FadeRoute,它使用ReactCSSTransitionGroup来创建动画,然后我在react-router-dom的switch组件中使用它
这是我的 react 代码
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { browserHistory } from "react-router";
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
function FadeRoute({ component: Component, ...rest }) {
return (
<Route {...rest} children={({ location, match }) => (
<ReactCSSTransitionGroup
transitionName="fade"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}>
<Component />
</ReactCSSTransitionGroup>
)
} />
);
}
class App extends React.Component {
render() {
return (
<Router history={browserHistory}>
<Switch>
<FadeRoute exact path="/" component={Home} />
<FadeRoute exact path="/NextComponent" component={NextComponent} />
<FadeRoute component={NoMatch} />
</Switch>
</Router>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
这里是CSS代码
.fade-enter {
opacity: 0.01;
}
.fade-enter.fade-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.fade-leave {
opacity: 1;
}
.fade-leave.fade-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
你能帮我找到pb在哪里吗? 预先感谢您
最佳答案
我通过将整个 Switch 包装在一个管理 CSSTransitionGroup 的组件中,成功地实现了这一点。 CSSTransitionGroup 需要同时临时渲染 2 个路由,以便能够在它们之间淡入淡出,因此它需要位于更高的级别。
class Fade extends Component {
render() {
return (
<Route render={({location}) => (
<CSSTransitionGroup
transitionName="fade"
transitionEnterTimeout={200}
transitionLeaveTimeout={200}
>
{React.cloneElement(this.props.children, {location: location, key: location.key})}
</CSSTransitionGroup>
)}/>
);
}
}
class App extends Component {
render() {
return (
<BrowserRouter>
<Fade>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/portfolio" component={Portfolio}/>
<Route path="/contact" component={Contact}/>
<Route component={NoMatch}/>
</Switch>
</Fade>
</BrowserRouter>
);
}
}
关于javascript - ReactCSSTransitionGroup 与 ReactJS 15 和 ReactRouter 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44242893/