reactjs – 反应过渡组 – 不要给孩子们制作动画

我正在使用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’到’noanimate’的双重转换,我不确定我是不是想写一些更糟糕的字符串操作来获取最后一个或倒数第二个词,取决于它是’tasks’/’activity’/’notes’还是任何其他字符串.

是否有更好的解决方案,或者是……我们是如何做事的？

解决方法

我有同样的问题,所以我写了自己的解决方案： 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>

它基本上抛出这个“Switch”内的所有路由,并使用matchPath函数识别某些路由是否正确匹配.