如何在React中实现过渡动画？

Question

我有一个显示多页内容的React组件。单击应用程序中其他位置的按钮可以更改此组件显示的内容，并具有给定的转换。此转换是自定义Javascript转换，而不是CSS转换，因此我无法使用ReactCSSTransitionGroup。

我能想到两种方法。两者都涉及传递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} />

我不确定哪一个更好，或者我错过的方法完全不同。

Answer 1

选项C

页面应该知道如何运行转换，并在完成转换后通知父级。通过这种方式，您将获得一个非常简单的API

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

所以你可以同时运行两个转换，比如打开Page1和关闭Page2

您可以在页面周围构建一个类似<Pager />的包装器，以便在内部进行计算以进行下一次转换。

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

但是<Page />本身应该知道如何移动