如何处理不是 TransitionGroup 的直接后代的孩子的退出

问题描述

我正在尝试在出现和离开时为 React 组件设置动画。仅使用 Csstransition 就可以轻松地在出现时对其进行动画处理，但是我很难理解如何在不将其耦合到其父组件的情况下对其进行动画处理。

理想情况下，我想使用 TransitionGroup 作为某种 Provider。这意味着，将它放在任何上层组件的任何位置，并让它处理在任何嵌套级别离开 dom 的任何子级。非常像 redux store provider 或 react context 所做的。

我读了几次 react-transition-group 的文档，我没有找到一种方法可以在不使 Csstransition 成为 TransitIoUnGroup 的直接子代的情况下做到这一点。

这是我理想的场景：

const SomeComponent = () => (
    <div> 
      some stuff 
      <AnimatedComponent />
    </div>)

const AnimatedComponent = = () => (
   <Csstransition> 
      some stuff 
    </Csstransition>)

const MainComponent = () => (
    <TransitionGroupProvider> 
      <SomeComponent />
      <OtherStuff />
    </TransitionGroupProvider>)

这个想法是保持动画组件解耦，并且仍然能够将其从 dom 中移除。如果这是不可能的，我可能会将它放在层次结构的更高位置（现在我可以），使其成为连接组件并基于 redux 存储对其进行动画处理，这样我就可以从其他组件控制它而无需耦合它。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-transition-group reactjs reactjs reactjs reactjs