TransitionGroup / CSSTransition與位置：相對？

Question

我正在開發一個React小部件（逐步向導），該小部件可從API獲取並顯示內容。 我不知道我從API提取的文本有多長時間。 所以我不知道小部件的高度。 小部件應增加與內容有關的高度（例如默認的HTML元素）。 不應滾動。

我無法在此處設置固定高度。 因此，我無法設置position: absolute要設置動畫的幻燈片。

目前，動畫如下所示：

第二張幻燈片出現在第一張幻燈片的下方，直到第一張幻燈片消失並且第二張幻燈片向上移動。 當然，這完全是丑陋的。

如果我為幻燈片設置了固定的高度和絕對位置，則一切工作都將順利進行。

您可以在這里看到我的問題的演示： https : //codepen.io/anon/pen/jdQPRw

Answer 1

TransitionGroup應該是多個Transition或CSSTransition的包裝器，因此首先應該將每張幻燈片包裝在CSSTransition中。 第二個讓“ in”屬性處理組件的“ hide＆show”

<CSSTransition in={slide === 2}

然后在動畫完成后使用屬性unmountOnExit來卸載幻燈片

我已經分叉了您的筆並對其進行了編輯，它可以正常工作，請檢查更改https://codepen.io/anon/pen/yZZqKo

 const { TransitionGroup, CSSTransition } = ReactTransitionGroup; class Slide extends React.Component { render() { return <div className="slide" style={{backgroundColor: this.props.bg}} >{this.props.content}</div> } } const content1 = 'Demo Text with different Length. This will get fetched from API. Demo Text with different Length. This will get fetched from API. Demo Text with different Length. This will get fetched from API. '; const content2 = 'Demo Text with different Length. This will get fetched from API. Demo Text with different Length. This will get fetched from API. Demo Text with different Length. This will get fetched from API. Demo Text with different Length. This will get fetched from API. Demo Text with different Length. This will get fetched from API. Demo Text with different Length. This will get fetched from API. Demo Text with different Length. This will get fetched from API. Demo Text with different Length. This will get fetched from API. Demo Text with different Length. This will get fetched from API. '; class Widget extends React.Component { state = { slide: 1 } render() { const slide = this.state.slide; return ( <div className="widget"> <TransitionGroup className="wrapper"><div> <CSSTransition in={slide === 1} classNames="fade" timeout={{ enter: 500, exit: 0 }} appear unmountOnExit ><Slide content={ content1 } bg="#fafafa" /> </CSSTransition></div><div> <CSSTransition in={slide === 2} classNames="fade" timeout={{ enter: 500, exit: 0 }} appear unmountOnExit ><Slide content={ content2 } bg="#ccc" /> </CSSTransition></div> </TransitionGroup> <div className="buttons"> <button className="next" onClick={ () => this.setState({slide: 1})} >Slide 1</button> <button className="next" onClick={ () => this.setState({slide: 2})} >Slide 2</button> </div> </div> ); } } ReactDOM.render( <Widget />, document.getElementById('root') ); 

 body { background: #eee; } .page { max-width: 500px; margin: 30px auto; } .widget { padding: 20px; background: #fff; border-radius: 5px; overflow: hidden; } .slide { padding: 20px; border-radius: 3px; } .buttons { display: flex; } .next { display: flex; flex: 1; margin: 10px; background: blue; color: #fff; padding: 14px; margin-top: 10px; border: 0; border-radius: 3px; font-size: 20px; text-decoration: none; text-align: center; } .fade-enter { opacity: 0.01; } .fade-enter-active { opacity: 1; transition: opacity 500ms ease-in; } .fade-enter-done {opacity:1} .fade-exit { opacity: 1; } .fade-exit-active { opacity: 0.01; transition: opacity 500ms ease-in; } 

 <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.5.3/react-transition-group.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.3.1/react-router-dom.js"></script> <div class="page"> <h1>Content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper ac tortor quis vulputate. Cras commodo dolor quis odio rutrum accumsan. Vestibulum aliquam bibendum odio vel auctor. In feugiat elit ac accumsan posuere. Donec facilisis tellus vitae faucibus pharetra. Aenean arcu dolor, molestie ut cursus vitae, congue id tortor. In scelerisque scelerisque dolor eget laoreet. Donec et consequat quam. Maecenas suscipit quis mi ac luctus. Aliquam aliquet vitae erat ut ultricies. Suspendisse laoreet lacinia nisl sit amet facilisis. Aliquam ac lorem leo. Etiam feugiat sagittis erat eget ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div id="root"> <!-- This element's contents will be replaced with your component. --> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper ac tortor quis vulputate. Cras commodo dolor quis odio rutrum accumsan. Vestibulum aliquam bibendum odio vel auctor. In feugiat elit ac accumsan posuere. Donec facilisis tellus vitae faucibus pharetra. Aenean arcu dolor, molestie ut cursus vitae, congue id tortor. In scelerisque scelerisque dolor eget laoreet. Donec et consequat quam. Maecenas suscipit quis mi ac luctus. Aliquam aliquet vitae erat ut ultricies. Suspendisse laoreet lacinia nisl sit amet facilisis. Aliquam ac lorem leo. Etiam feugiat sagittis erat eget ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div>