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

Question

因此，我尝试使用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

提前感谢！

Answer 1

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

默认情况下，无论in的值是什么，子组件在第一次装载时都不会执行enter转换。如果需要此行为，请将appear和in都设置为true。

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

Answer 2

看起来这是在一段时间之前发布的，并且你已经在你的代码中切换到了React-spring。但是，如果你仍然感兴趣，或者其他人可能仍然感兴趣，我找到了几个很好的教程视频，它们可能会在未来帮助你使用React-transition-group。

• React Transition Group Tutorial
• React Animations Tutorial using React Transition Group

这些youtube视频非常详细。

另外，下面是React-transition-group：ReactCommunity React-transition-group的文档