我一直在尝试react-transition-group
,偶然发现了一个我无法自行修复的错误。由于某些原因,当我单击当前路径时,动画也会触发。因此,基本上,如果我目前在/home
处,并按下指向相同路径的链接,则动画将触发并仅重新渲染当前组件。为了简单起见,假设此组件仅将不透明度从0
更改为1
。
代码在这里:
<Navigation/>
<TransitionGroup>
<CSSTransition
key={this.props.location.key}
timeout={{ enter: 500, exit: 400 }}
classNames="fade"
>
<Switch location={this.props.location}>
<Route
path="/phrasals/en"
render={() => {
return (
<Layout>
<PhrasalVerbsEn />
</Layout>
);
}}
/>
<Route
path="/phrasals/ge"
render={() => {
return (
<Layout>
<PhrasalVerbsGe />
</Layout>
);
}}
/>
<Route
path="/verbs"
render={() => {
return (
<Layout>
<IrregularVerbs />
</Layout>
);
}}
/>
<Route
path="/supported-languages"
render={() => {
return (
<Layout>
<Languages />
</Layout>
);
}}
/>
<Route
path="/"
exact={true}
render={() => {
return (
<Layout>
<Home />
</Layout>
);
}}
/>
<Route
path="/courses"
exact={true}
render={() => {
return <CourseList />;
}}
/>
</Switch>
</CSSTransition>
</TransitionGroup>
实际构建,其中存在错误: https://d-ivashchuk.github.io/irregio-react/