代码之家 › 专栏 › 技术社区 › MitchEff

反应过渡组-不设置子对象的动画

react-transition-group react-router reactjs

4

MitchEff · 技术社区 · 7 年前

react-transition-group 要在React中设置路由器交换机的动画,请执行以下操作:

    <CSSTransitionGroup transitionName="zoom" transitionEnterTimeout={200} transitionLeaveTimeout={200}>
        <Switch key={key} location={this.props.location}>
            <Route path={this.props.match.url+"/tasks/:task_id"} component={SingleTask} key={'none'} />
            <Route slug={this.props.match.params.project_slug} path={this.props.match.url+"/"} render={(params) => (
                <ProjectIndex {...params} slug={this.props.match.params.project_slug} />
            )} key={'none'}  />
        </Switch>
    </CSSTransitionGroup>

每当任何子路由更改时,它也会触发动画。所以,为了解决这个问题,我使用 this.props.location.pathname

pathname = pathname.split('?')[0].split('/').filter(function (i) { return i !== ""}).slice(-1)[0];

...如果是“任务”、“活动”或“笔记”,我只是把键设置为 'noanimate'

    switch(pathname){
        case 'tasks':
        case 'activity':
        case 'notes':
            key = 'noanimate';
            break;
        default:
            key = pathname;
            break;
    }

现在,重定向自 /project /project/tasks 在开始时进行双重转换 'project' 到 ,我不确定我是否打算写一些更糟糕的字符串操作,只是为了得到最后一个或第二个最后一项,这取决于它是“tasks”/“activity”/“notes”还是任何其他字符串。

有更好的解决方案吗,还是。。。我们该怎么做?

1 回复 | 直到 7 年前

1

0

Melounek 7 年前

我也有同样的问题,所以我写了自己的解决方案: switch-css-transition-group

安装后,您可以将代码重写为:

import SwitchCSSTransitionGroup from 'switch-css-transition-group'

<SwitchCSSTransitionGroup location={this.props.location} transitionName="zoom" transitionEnterTimeout={200} transitionLeaveTimeout={200}>
    <Route path={this.props.match.url+"/tasks/:task_id"} component={SingleTask} key={'none'} />
    <Route slug={this.props.match.params.project_slug} path={this.props.match.url+"/"} render={(params) => (
        <ProjectIndex {...params} slug={this.props.match.params.project_slug} />
    )} key={'none'}  />
</SwitchCSSTransitionGroup>

matchPath