反应弹簧在更新时动画

Question

我正在使用 react-spring 尝试使用过渡组件创建一个动画，当组件中的道具发生变化时，该组件会淡出然后又回来。

通过查看文档，我了解到这可以通过使用过渡组件中的"更新"属性来实现。

但是，这似乎只设置了一个永远不会更改的值(当道具更改时，不透明度设置为 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>
}
}

南海

.panel-with-sidepane__slave {
position: relative;
...redacted
}
.panel-with-sidepane__slave__animation-container {
position: absolute;
width: 100%;
height: 100%;
}

场景 1：

不同的从属组件道具

1. 作为道具传递给从属 元件。
2. 预计这会触发更新，淡出和淡入。

场景 2：

1. 从站中的返回条件更改
2. 预计这会淡出第一个返回组件，并在另一个组件中淡出。

Answer 1

react-spring 6 使这变得更容易一些，因为现在过渡可以是链(字面意思是一个接一个运行的动画数组(： http://react-spring.surge.sh/transition 您还可以为此使用插值范围，请参阅：http://react-spring.surge.sh/perf#interpolation