CSS 转换不会在 React 组件更改内部 DOM 结构后继续存在

Question

I have illustrated the problem in this CodePen

const Component = ({ structure }) => {
  switch (structure) {
    case 'nested': 
      return (
        <div>
          <AnimatedComponent />
      </div>
     );
    case 'flat': 
      return 
        <AnimatedComponent />
      ;
  }
};

AnimatedComponent 中有一些逻辑以动画方式更改组件的样式，例如在 1 秒的时间内将背景颜色从黑色更改为红色。通过在 AnimatedComponent 上更改颜色 class 开始动画。鉴于更改后的 class.

，有 CSS 来处理动画

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

我希望 React 做的是通过在新位置移动元素来更改 DOM 结构，而不是破坏和重新创建它们。

这可能吗？

我尝试在 <AnimatedComponent /> 上使用 key 道具，但它只修复了 DOM 变化的闪光。动画被跳过。有关此建议，请参阅 Codepen. Thanks Thomas Rooney。

我可以告诉 React 在 DOM 元素的位置更改后仅一次应用 class 更改吗？

Answer 1

Can I tell React to apply the class changes just one tick after the position of the DOM element was changed?

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

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

codepen

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

onColorClick: () => {
  setTimeout(() => { 
    dispatch({type: 'TOGGLE_COLOR'})
  }, 100) <-- play around with this value
},

CSS 转换不会在 React 组件更改内部 DOM 结构后继续存在

CSS Transitions don't survive React Component changing inner DOM structure

css

dom

css-transitions

reactjs

react-dom