Redux/Flux(带ReactJS)和动画

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

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

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

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

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

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

感谢阅读 – 任何建议?

最佳答案
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,然后需要/ import’alaction-addons-css-transition-group’.动画文档提供更详细的信息.

有一点需要记住 – 确保孩子们拥有独特,不变的钥匙.仅使用索引作为键将使其行为不正确.

转载注明原文:Redux/Flux(带ReactJS)和动画 - 代码日志