Question

I have illustrated the problem in this CodePen

List.map

const Component = ({ structure }) => { switch (structure) { case 'nested': return ( <div> <AnimatedComponent /> </div> ); case 'flat': return <AnimatedComponent /> ; } };中有一些逻辑以动画的方式改变了Component的样式，例如：在1秒的持续时间内将背景颜色从黑色更改为红色。通过更改AnimatedComponent上的颜色类来启动动画。给定更改的类，有CSS来处理动画。

当将DOM结构从嵌套更改为flat时，HTML元素被销毁并重新创建，转换开始状态将丢失（也就是浏览器不知道之前设置了哪个类，因为元素是新创建的）。

我想要React做的是用新位置的移动元素更改DOM结构，而不是破坏和重新创建它们。

这可能吗？

我尝试使用AnimatedComponent上的key道具，但它只修复了DOM更改的闪存。动画被跳过。见Codepen。感谢Thomas Rooney提出此建议。

我可以告诉React在更改DOM元素的位置后的一个刻度应用类更改吗？

Answer 1

我可以告诉React在更改DOM元素的位置后的一个刻度应用类更改吗？

是的，这正是setTimeout功能的用途。复制你修复闪烁的第二个例子，用setTimeout包裹你的颜色动作调度（没有时间值，默认为0），似乎可以解决你的问题。

onColorClick: () => {
  setTimeout(() => { 
    dispatch({type: 'TOGGLE_COLOR'})
  })
},

codepen

更新：我注意到在颜色变化之前添加一些时间（setTimeout，(fn, ms)中的第二个参数更加可靠。我相信这是因为{{ 1}}也是异步发生的。

setState

CSS转换不能在React组件中改变内部DOM结构

1 个答案: