React 过渡组：CSSTransition 在进入时起作用，而不是在退出时起作用

Question

我有一个 React 应用程序正在使用来自 react-transition-group 的 CSSTransition 组件：当组件出现时，一切都按预期运行（从 opacity: 0 到 opacity: 1 的 0.5 秒转换），但是当组件退出时，没有应用过渡，它只是立即消失。谁能帮我弄清楚为什么？

组件中的渲染方法：

    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>
        );
    }

CSS：

.transition-appear {
    opacity: 0.01;
  }
  
.transition-appear.transition-appear-active {
    opacity: 1;
    transition: opacity .5s ease-in;
}

.transition-enter {
    opacity: 0;
}

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

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

Answer 1

我也为过渡而苦苦挣扎，但我想出了一个解决方案。我不知道你的最终结果在 UI 中应该是什么样子，你是想在页面上的条件渲染元素之间进行转换，还是只是在组件安装和卸载时进行转换，但我认为你想做前者.

要在同一页面上的两个或多个元素之间进行转换，您需要将 <CSSTransition> 标签包装在 <TransitionGroup> 标签中（并将其与 CSSTransition 一起导入）。执行此操作时，您需要为<CSSTransition> 标记提供一个 unique 键属性，它不能只是一个布尔值，就像看起来一样。您还需要稍微修改您的 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>

)

请注意：此方法不需要appear、in 或unmountOnExit 属性，但是在转换期间您会遇到重复元素出现在 DOM 中的问题，因为实际上是 react-transition-group克隆元素并删除旧元素（这就是它需要唯一键的原因）。实现交叉淡入淡出过渡的唯一方法是将元素从具有绝对位置的文档流中取出，这样它们就会重叠，一个过渡进入，另一个过渡出来。

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

https://codesandbox.io/s/long-sea-9rtw9?file=/src/Test.js