react-transition-group CSSTransition 是如何工作的？答案

【问题标题】：How does react-transition-group CSSTransition work?react-transition-group CSSTransition 是如何工作的？
【发布时间】：2022-01-18 09:31:32
【问题描述】：

所以我尝试使用 react-transition-group 来为应用不同部分之间的过渡设置动画。

我在 CSSTransition 组件中有我想要动画的组件，方式如下：

       return (
        <CSSTransition in={showDepSearchResults} timeout={3000} classNames="fade" onEntered={() => showDepSearchResults(true)} onExit={() => showDepSearchResults(false)} >
            <div className='searchResult' key='searchResult'>


                <FlightSearchParameters flightSearchParams={flightSearchParams} typeOfDepartureDate={typeOfDepartureDate} typeOfReturnDate={typeOfReturnDate} typeOfTripSwitch={typeOfTripSwitch} formatPlaces={formatPlaces}/>

                <h1>Vuelos {typeOfSearchTittle()} disponibles:</h1>
                {showFlights()}
                <button className='btn btn-secondary' onClick={(e) => handleSearchAgain(e)}>Buscar más vuelos</button>

            </div>
        </CSSTransition>
    )
}

另外，我的 CSS 中有以下代码：

.fade-appear {
    opacity: 0;
}

.fade-appear-active {
    opacity: 1;
    transition: opacity 3000ms;
}

.fade-enter {
    opacity: 0;
}

.fade-enter-active {
    opacity: 1;
    transition: opacity 3000ms;
}

.fade-exit {
    opacity: 1;
}

.fade-exit-active {
    opacity: 0;
    transition: opacity 3000ms;
}

由于某种原因，我还不明白这不起作用。有人对此有答案吗？

完整代码在这里：https://github.com/coccagerman/bond

提前致谢！

【问题讨论】：

标签： reactjs animation react-transition-group web-animations react-animations

【解决方案1】：

我在使用这个库时也遇到了一些问题。我很好奇您是否尝试将appear 属性添加到<CSSTransition>？根据Transition.js：

默认情况下，无论in 的值如何，子组件在首次挂载时都不会执行回车转换。如果您想要这种行为，请将appear 和in 都设置为true。

记住还要在你的 css.*-appear-enter、.*-appear-enter-active 属性中定义。通常，它们与.*-enter、.*-enter-active 相同。

【讨论】：

【解决方案2】：

看起来这是不久前发布的，并且您已经在代码中切换到 React-spring。但是，如果您仍然感兴趣，或者其他人可能仍然感兴趣，我发现了一些很好的教程视频，它们可能会帮助您将来使用 React-transition-group。

这些 youtube 视频非常详细。

另外，这里是 React-transition-group 的文档： ReactCommunity React-transition-group

【讨论】：