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

问题描述

所以我尝试使用 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

提前致谢！

解决方法

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

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

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