初始页面加载时的反应路由器过渡动画
react-router transition animation on initial page load
我想在使用 react-router 转换时将动画应用于组件,我只能在初始加载后执行此操作,但是我也想在初始安装时看到动画(页面刷新)。
这是我试过的。注意 transitionAppear: true
没有做任何事情:
class App extends Component {
constructor() {
super();
}
render() {
let path = this.context.router.getCurrentPath();
path = path.substring(0, path.split('/', 2).join('/').length);
return (
Transitions({component: 'div', transitionName: 'fade', transitionAppear: true},
handler({key: path})
)
)
}
}
在重读 react docs 时,我意识到 transitionAppear
触发了它自己的 css class (.appear
)。添加这个 class 解决了我的问题。
我想在使用 react-router 转换时将动画应用于组件,我只能在初始加载后执行此操作,但是我也想在初始安装时看到动画(页面刷新)。
这是我试过的。注意 transitionAppear: true
没有做任何事情:
class App extends Component {
constructor() {
super();
}
render() {
let path = this.context.router.getCurrentPath();
path = path.substring(0, path.split('/', 2).join('/').length);
return (
Transitions({component: 'div', transitionName: 'fade', transitionAppear: true},
handler({key: path})
)
)
}
}
在重读 react docs 时,我意识到 transitionAppear
触发了它自己的 css class (.appear
)。添加这个 class 解决了我的问题。