2

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

提前致谢！

4

2 回答 2

1

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

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

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

于 2021-06-04T04:21:29.500 回答
1

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

这些 youtube 视频非常详细。

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

于 2022-01-18T01:31:32.367 回答