在react.js应用中, 我有一些简单的文本存储在App状态中,并传递给一个子组件,该子组件将直接显示它。 我想为过渡设置动画,以便当过渡发生变化时,以前的文本将淡出,然后传入的文本将淡入。
使用react-spring怎么可能?
答案 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的位置绝对正确。