时间戳

首页 > 解决方案 > react-transition-group CSSTransition 是如何工作的？

reactjs - 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

提前致谢！

标签： reactjsanimationreact-transition-groupweb-animationsreact-animations

解决方案

我在这个图书馆也遇到了一些麻烦。我很好奇您是否尝试将appear属性添加到<CSSTransition>？根据Transition.js：

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

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

推荐阅读