我有一個顯示多頁內容的React組件。單擊應用程序中其他位置的按鈕應改變此組件顯示的內容，並進行給定的轉換。這個過渡是一個自定義的Javascript過渡，而不是一個CSS過渡，所以我不能使用ReactCSSTransitionGroup。如何在React中實現過渡動畫？

有兩種方法我可以想到。兩者都涉及傳遞transition作爲道具，但不同之處在於下一頁如何傳入組件。

選項A

此選項使用transition道具的存在，表明它應該動畫。它將page1保留在其內部state中，以便它仍然可以渲染它直到轉換完成。完成後，組件將分派一個操作，該操作會導致父組件移除轉換道具。

每個步驟是父組件對Pager組件的另一個渲染。

// 1 
<Pager currentPage={page1} /> 
// 2 
<Pager currentPage={page2} transition={transition} /> 
// 3 
<Pager currentPage={page2} />

選項B

該選項將在兩個transition和nextPage明確。轉換完成後，組件再次分派一個操作。

// 1 
<Pager currentPage={page1} /> 
// 2 
<Pager currentPage={page1} nextPage={page2} transition={transition} /> 
// 3 
<Pager currentPage={page2} />

我不確定其中哪一個更好，或者如果有一個完全不同的方法，我錯過了。

來源

2016-07-15 Stuart K

選項C

頁面應該知道如何運行轉換，並在完成後通知父項。這樣你會得到這樣的

// Not pages.. page 
<Page 
    transition={{...}} 
    component={Login} 
    onTransitionEnd={...} 
/>

一個非常簡單的API，因此，你可以在同一時間運行兩個轉變，就像打開第一頁和第二頁關閉

你可以建一個包裝像周圍的網頁<Pager /> ，爲下一次轉換做好計算。

<Pager initIndex={0} pages={[....]}>

但<Page />本身應該知道如何移動

來源

2016-07-16 02:18:12 webdeb

如何在React中實現過渡動畫？

選項A

選項B

回答

選項C

相關問題