Css 反应过渡组：CSTranslation在进入时工作，而不是在退出时工作

我有一个React应用程序，它正在使用

React transition组的
CSTransition
组件：当该组件出现时，一切都按照预期运行（从
opacity:0
到
opacity:1
的0.5s转换），但是当该组件退出时，不应用转换，它只是立即消失。有人能帮我找出原因吗

组件中的渲染方法：

    render(){

        const countries = geoUrl.objects.ne_50m_admin_0_countries.geometries;
        const { handleEnter, handleList, list } = this.props;

        return (
            <CSSTransition
                classNames="transition"
                transitionAppearTimeout={50000}
                timeout={500000}
                key={ list }
                in={ list } // this is a boolean value passed from the parent component, it is initially set to false but changes to true when this component is rendered
                unmountOnExit
                appear
            >   
                <div className="overlay" id="list">      
                    <div className="wrapper" ref={this.setWrapperRef}>
                        <aside className="list">
                            <a className="close" href="#home" onClick={handleList}>&times;</a>
                            <ul className="countryList">
                                { countries.sort((a, b) => (a.properties.NAME > b.properties.NAME) ? 1 : -1).map(geo =>
                                    geo.properties.COUNTRY ?
                                    <li className="listItem" key={ `${geo.properties.ISO_A3}${geo.properties.name}` }><a href="#country" onClick={() => {
                                        const { NAME, DISH, DESCRIPTION, PHOTO, RECIPE } = geo.properties;
                                        handleEnter(NAME, DISH, DESCRIPTION, PHOTO, RECIPE);
                                    }}>{ geo.properties.NAME }</a></li>
                                    : null
                                )}
                            </ul>
                        </aside>
                    </div>
                </div>
            </CSSTransition>
        );
    }

我也很难摆脱这种过渡，但我已经想出了一个解决办法。我无法判断最终结果在UI中应该是什么样子，是希望在页面上有条件呈现的元素之间进行转换，还是仅在组件装载和卸载时进行转换，但我认为您希望执行前者

要在同一页面上的两个或多个元素之间转换，您需要将
标记包装在
标记中（并将其与CSTranslation一起导入）。当您这样做时，您需要为
标记提供一个唯一的键属性，它不能像您所拥有的那样只是一个布尔值。您还需要稍微修改CSS

.transition-enter {
  opacity: 0;
}

.transition-enter.transition-enter-active {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

.transition-enter-done {
  opacity: 1;
}

.transition-exit {
  opacity: 1;
}

.transition-exit.transition-exit-active {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.transition-exit-done {
  opacity: 0;
}

和转换标签：

import {CSSTransition, TransitionGroup} from "react-transition-group"

//...the rest of your code

return (
    <TransitionGroup>
       <CSSTransition
          key={foo} //something unique to the element being transitioned
          classNames="transition"
          timeout={500}
       >
          <div className="overlay" id="list">      
                    <div className="wrapper" ref={this.setWrapperRef}>
                        <aside className="list">
                            <a className="close" href="#home" onClick={handleList}>&times;</a>
                            <ul className="countryList">
                                { countries.sort((a, b) => (a.properties.NAME > b.properties.NAME) ? 1 : -1).map(geo =>
                                    geo.properties.COUNTRY ?
                                    <li className="listItem" key={ `${geo.properties.ISO_A3}${geo.properties.name}` }><a href="#country" onClick={() => {
                                        const { NAME, DISH, DESCRIPTION, PHOTO, RECIPE } = geo.properties;
                                        handleEnter(NAME, DISH, DESCRIPTION, PHOTO, RECIPE);
                                    }}>{ geo.properties.NAME }</a></li>
                                    : null
                                )}
                            </ul>
                        </aside>
                    </div>
                </div>
       </CSSTransition>
    </TransitionGroup>

)

从“react transition group”导入{CSTranslation，TransitionGroup}
//…剩下的代码
返回(

{countries.sort（（a，b）=>（a.properties.NAME>b.properties.NAME）？1:-1.map（geo=>
geo.properties.COUNTRY？

：null
)}

)

请注意：此方法不需要
出现
、
出现在
中或
卸载下一个
属性，但在转换期间DOM中出现重复元素会有问题，因为react转换组实际上克隆了元素并删除了旧元素（这就是为什么它需要唯一键的原因）。实现交叉淡入过渡的唯一方法是使用“绝对位置”（position absolute）将元素从文档流中移出，以便它们在一个过渡进入和另一个过渡离开时重叠

我无法测试您的确切代码，因为没有足够的信息，但我整理了一个非常基本的codesandbox，用2个有条件呈现的元素演示该方法：


import {CSSTransition, TransitionGroup} from "react-transition-group"

//...the rest of your code

return (
    <TransitionGroup>
       <CSSTransition
          key={foo} //something unique to the element being transitioned
          classNames="transition"
          timeout={500}
       >
          <div className="overlay" id="list">      
                    <div className="wrapper" ref={this.setWrapperRef}>
                        <aside className="list">
                            <a className="close" href="#home" onClick={handleList}>&times;</a>
                            <ul className="countryList">
                                { countries.sort((a, b) => (a.properties.NAME > b.properties.NAME) ? 1 : -1).map(geo =>
                                    geo.properties.COUNTRY ?
                                    <li className="listItem" key={ `${geo.properties.ISO_A3}${geo.properties.name}` }><a href="#country" onClick={() => {
                                        const { NAME, DISH, DESCRIPTION, PHOTO, RECIPE } = geo.properties;
                                        handleEnter(NAME, DISH, DESCRIPTION, PHOTO, RECIPE);
                                    }}>{ geo.properties.NAME }</a></li>
                                    : null
                                )}
                            </ul>
                        </aside>
                    </div>
                </div>
       </CSSTransition>
    </TransitionGroup>

)