使用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的位置绝对正确。