使用react-spring更新时如何为文本设置动画？

Question

在 react.js 应用程序中， 我在 App 状态中存储了一些简单的文本，并传递给将直接显示它的子组件。 我想为过渡设置动画，这样当它发生变化时，以前的文本会淡出，然后传入的文本会淡入。

使用 react-spring 怎么可能？

Answer 1

您可以将其放入过渡中，它会为您处理：

const transitions = useTransition(text, null, {
  from: { opacity: 0 },
  enter: { opacity: 1 },
  leave: { opacity: 0 }
})
return transitions.map(({ item, key, props }) => (
  <animated.div style={props}>{item}</animated.div>
))

如果您希望文本短语相互重叠，请确保 div 绝对定位。