具有React Context的React Spring Transition在组件已经更新后设置动画

Question

我有一个React组件，它应该订阅React Context并呈现一些文本。当上下文更新时，文本应该更新，但当发生此更新时，我希望使用旧值为组件设置动画，并使用新值为其设置动画。我是React Spring的新手，但我认为它们的Render-props API中的Transition可以分别在装载和卸载时触发动画事件。

当上下文发生变化时，From、Enter和Leave似乎起作用，并且动画确实会播放，但它将首先更改上下文的内容，然后渲染"；输入->离开"在旧元素呈现"；发件人->输入"；在新元素上产生重复的元素和当"；旧元素"；正在离开。

我的想法告诉我，我需要更好地利用生命周期来处理重复的元素，也许可以使用父组件中的道具来抽象上下文值，而不是直接使用上下文值，但我在这里可能大错特错。

所以，我的问题是，如何让Leave动画使用旧文本值播放，然后使用新文本值播放Enter动画，并且一次只显示一个元素？

此外，这是我在这里的第一个问题，所以如果我做错了，请告诉我。

const TextComponent = () => {
const contextData = useContext(Context);
return (
<Transition
items={contextData.textToRender}
from={{ opacity: 0, transform: 'translate3d(0%, -15%, 0)' }}
enter={{ opacity: 1, transform: 'translate3d(0%, 0%, 0)' }}
leave={{ opacity: 0, transform: 'translate3d(-15%, 0%, 0)' }}
>
{(condition) =>
condition &&
((styles) => (
<div style={styles}>
<p className='station-text'>{contextData.textToRender}</p>
</div>
))
}
</Transition>
);
};

Answer 1

与一位朋友交换了想法解决方案，我们找到了一个解决方案(大多数情况下，他是诚实地找到了解决方案(。

首先，对我来说，正确数据的呈现是一个简单的疏忽，因此我们实际上使用了传递给转换API的数据，而不是直接使用上下文中的数据。

<p className='station-text'>{text}</p>

然后，我的朋友发现了一个"；交错渲染"；我一直在寻找的。https://github.com/pmndrs/react-spring/issues/1064

因此，我们专注于寻找解决方法，并意识到我们可以在API中将数组发送到各种动画状态。

enter={[{ display: 'none' }, { display: 'block', opacity: 1, transform: 'translate3d(0%, 0%, 0)' }]}

这解决了我的用例并回答了我的问题。下面是一个代码块，它可以很好地处理单个项或数组项，每当我们更新上下文数据时，都会播放正确的动画，并根据需要使用新数据创建新组件。

<Transition
items={[contextData.textToRender.firstString, contextData.textToRender.secondString]}
from={{ opacity: 0, transform: 'translate3d(0%, -15%, 0)' }}
enter={[{ display: 'none' }, { display: 'block', opacity: 1, transform: 'translate3d(0%, 0%, 0)' }]}
leave={[{ display: 'block', opacity: 0, transform: 'translate3d(-15%, 0%, 0)' }, { display: 'none' }]}
>
{(text) =>
text &&
((styles) => (
<div style={styles}>
<p className='station-text'>{text}</p>
</div>
))
}
</Transition>