我正在使用 react-spring 尝试使用 Transition 组件创建一个动画，当组件中的道具发生变化时，该组件会淡出然后重新加入。
通过查看文档，我了解到这可以通过使用 Transition 组件中的“update”道具来实现。
然而，这似乎只是设置了一个永远不会改变的值（当道具改变时，不透明度设置为 0.5）。我不明白如何使用它来淡出 Slave 组件并在道具更改时将其淡出。
过渡组件：
<div className="panel-with-sidepane__slave">
<Transition
native
from={{ opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0 }}
update={{ opacity: 0.5 }}
to={{ opacity: 1 }}
>
{styles => {
return (
<Slave
style={styles}
SlaveComponent={SlaveComponent}
isMobile={isMobile}
setWrapperRef={this.props.setWrapperRef}
onFocus={this.props.onFocus}
onBlur={this.props.onBlur}
fallbackTxt={fallbackTxt}
activeRowIndex={activeRowIndex}
/>
)
}
}
</Transition>
</div>
组件在返回更改/道具更改时进行动画处理：
const Slave = ({
activeRowIndex,
fallbackTxt,
isMobile,
onBlur,
onFocus,
setWrapperRef,
SlaveComponent,
style
}) => {
if (!isMobile && typeof activeRowIndex === 'number') {
return (
<animated.div
style={style}
ref={ref => setWrapperRef(ref)}
onFocus={onFocus}
onBlur={onBlur}
className="panel-with-sidepane__slave__animation-container"
>
{SlaveComponent}
</animated.div>
)
} else if (!isMobile && typeof activeRowIndex === 'undefined') {
return <div style={style} className="panel-with-sidepane__slave__animation-container panel-with-sidepane__fallback">{fallbackTxt}</div>
}
}
SCSS
.panel-with-sidepane__slave {
position: relative;
...redacted
}
.panel-with-sidepane__slave__animation-container {
position: absolute;
width: 100%;
height: 100%;
}
场景一：
- 不同的 SlaveComponent 道具作为道具传递给从属组件。
- 预计这会触发更新、淡出和淡入。
场景二：
- 从站的返回条件变化
- 预计这会淡出第一个返回组件并淡入另一个。