Redux/Flux(带ReactJS)和动画

Question

我正在学习React + Redux,我不明白做动画的正确方法.让我们举例说明:

例如,我有一个列表,我想删除点击项目.如果我没有动画效果那就非常容易:REMOVE_ITEM点击时调度动作,reducer从商店中删除项目并对重新渲染html做出反应.

让我们添加一个在点击时删除订单项的动画.因此,当用户点击某个项目时,我想要运行删除订单项的奇特效果...... 如何？我可以想到几种方法:

1)点击我调度REMOVE_ITEM动作,然后reducer标记一个项目,如goingToBeDeletedStore,然后反应渲染该元素与一个类,.fancy-dissolve-animation我运行一个计时器来调度第二个动作REMOVE_ITEM_COMPLETED.我不喜欢这个想法,因为它仍然不清楚如何在这里添加JS动画(例如,使用TweenMax),并且我运行JS计时器以在CSS动画结束时重新渲染.听起来不太好.

2)我ITEM_REMOVE_PROGRESS以~30ms的间隔调度动作,并且store保存一些表示当前动画状态的"值".我也不喜欢它,因为它需要我复制商店约120次~2秒的动画(比方说,我想要平滑的60 fps动画),这只是浪费内存.

3)制作动画并REMOVE_ITEM仅在动画结束后发送.这是我能想到的最合适的方式,但我仍然想在用户做出动作后立即更改存储.例如,动画可能需要超过几秒钟,并且REMOVE_ITEM可能与后端同步 - 没有理由等待动画完成后端API调用.

感谢阅读 - 任何建议？

Answer 1

React 在 ReactCSSTransitionGroup 辅助类中对这个问题有一个很好的解决方案（参见https://facebook.github.io/react/docs/animation.html）。使用此选项，React 会为您处理它，将子级的 DOM 状态保持为上次渲染时的状态。您只需将项目包装在 ReactCSSTransitionGroup 对象中即可。这会跟踪它的子项，当它在删除子项的情况下进行渲染时，它不会在没有子项的情况下进行渲染，而是使用子项进行渲染，但会向子项添加一个 CSS 类（您可以使用它来触发 CSS 动画，或者为了简单起见，您可以只使用 CSS 过渡）。然后，在超时后（配置为传递给 ReactCSSTransitionGroup 的 prop），它将再次重新渲染，并将子级从 DOM 中删除。

要使用 ReactCSSTransitionGroup，您需要 npm install react-addons-css-transition-group，然后 require/import 'react-addons-css-transition-group'。动画文档提供了更详细的信息。

要记住一件事 - 确保孩子们拥有独特的、不变的钥匙。仅使用索引作为键会导致其行为不正确。