3

我已经在这个 CodePen 中说明了这个问题

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

有一些逻辑以AnimatedComponent动画方式更改组件的样式，例如在 1 秒的持续时间内将背景颜色从黑色更改为红色。动画是通过更改颜色类开始的AnimatedComponent。给定更改的类，有 CSS 来处理动画。

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

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

这可能吗？

我尝试在 上使用key道具<AnimatedComponent />，但它只修复了 DOM 更改的 flash。动画被跳过。请参阅Codepen。感谢托马斯鲁尼的这个建议。

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

4

1 回答 1

1

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

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

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

密码笔

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

onColorClick: () => {
  setTimeout(() => { 
    dispatch({type: 'TOGGLE_COLOR'})
  }, 100) <-- play around with this value
},
于 2016-06-05T15:06:20.597 回答