Redux/Flux（使用ReactJS）和动画

Question

我正在学习React Redux，但我不了解制作动画的正确方法。让我们举个例子：

例如，我有一个列表，我想在点击时删除项目。这是超级容易，如果我没有动画效果：调度REMOVE_ITEM点击动作，减速机从商店中删除项目，并做出反应重新渲染html。

让我们添加一个在单击时删除行项目的动画。所以，当用户点击一个项目时，我想运行一个奇特的效果，删除行项目，然后。。。怎样我可以想出几种方法：

1）单击我调度REMOVE_ITEM动作，然后减速器在Store中将一个项目标记为goingToBeDeled，然后反应将该元素呈现为一类。花式-溶解-动画，我运行计时器来调度第二个动作REMOVE_ITEM_COMPLETED。我不喜欢这个想法，因为仍然不清楚如何在这里添加JS动画（例如，使用TweenMax），并且我运行JS计时器在CSS动画结束时重新渲染。听起来不太好。

2） 我以大约30毫秒的间隔分派项目\u移除\u进度操作，并存储一些表示动画当前状态的“值”。我也不喜欢它，因为它需要我在2秒钟的动画时间内复制存储区120次（比如，我想要平滑的60 fps动画），这只是浪费内存。

3）制作一个动画，并在动画完成后才派遣REMOVE_ITEM。这是我能想到的最合适的方式，但我仍然希望在用户做出操作后立即在商店中进行更改。例如，动画可能需要几秒钟以上的时间，并且REMOVE_ITEM可能与后端同步-没有理由等待动画完成以进行后端API调用。

感谢阅读–有什么建议吗？

Answer 1

在保存状态的redux中，即时操作是有问题的，所以如果我们发送操作，它将更改存储，那么存储中的此更改在下一个状态中可用，所以我们可以有动画显示一遍又一遍的情况，因为在存储中设置了这样的参数。

我对redux即时动作的解决方案是添加一些id（动作示例代码）：

{
    type:"SOME_ANIMATION",
    id: new Date().getTime() //we get timestamp of animation init
}

运行动画的组件中的下一个保存最后一个动画id，如果它的匹配不做动画。我使用组件状态，例如（组件代码）：

componentDidUpdate (){

if (this.lastAnimationId===this.props.animation.id)
return; //the same animation id so do not do anything

//here setState or do animation because it is new one

this.lastAnimationId=this.props.animation.id; //here set new id of last abnimation

}

谢天谢地，我们只能有一个操作，没有正在反转状态的操作。超时后反转操作可能会导致问题，因为如果在反转操作之前发送其他操作（与组件连接），则动画可以再次启动。

我提出的方法的缺点是动画数据存在于状态中，但也存在给我们关于它的信息的动画标识。所以我们可以说存储保存了最后发送的动画。

Answer 2

React在ReactCSTransanitionGroup助手类中有一个很好的解决方案（请参阅https://facebook.github.io/react/docs/animation.html)。使用此选项，React会将子项的DOM状态保持为上次渲染时的状态，从而为您解决此问题。您只需将项目包装在一个ReactCsStrasitionGroup对象中。这会跟踪其子对象，并且当在移除子对象的情况下对其进行渲染时，而不是在不使用子对象的情况下进行渲染，它会使用子对象进行渲染，但会向子对象添加一个CSS类（可以使用该类触发CSS动画，也可以仅使用CSS转换以简化）。然后，在超时后（配置为传递给ReactCSStransitongGroup的道具），它将再次重新渲染，并将子对象从DOM中移除。

要使用ReactCSSTrantionGroup，您需要npm安装react-addons-css-过渡-组，然后需要/导入'react-addons-css-过渡-组'。动画文档提供了更详细的信息。

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