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

时间:2019-02-16 10:47:33

标签: reactjs animation text transition react-spring

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

使用react-spring怎么可能?

1 个答案:

答案 0 :(得分: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的位置绝对正确。