我正在尝试使用React Motion的 TransitionMotion （docs）为项目列表（来自Redux）执行挂载/卸载动画：
// import statements
@withRouter
@connect(state => ({
store: state.example
}))
export default class Example extends Component {
getContent = interpolatedStyles => {
// interpolatedStyles is stale
return (
<div>
{
this.props.store.visibleItems
.map(({data}, index) => {
// interpolatedStyles[index] is undefined for indices > 0
return (
<Item data={data} key={interpolatedStyles[index].key} style={interpolatedStyles[index].style}/>
);
})
}
</div>
);
};
getDefaultAnimationStyles() {
return this.props.store.visibleItems.map(({name}) => ({
key: name,
style: {
opacity: 0
}
}));
}
getAnimationStyles() {
return this.props.store.visibleItems.map(({name}) => ({
key: name,
style: {
opacity: spring(1, {stiffness: 66, damping: 21})
}
}));
}
willLeave = () => {
return {
opacity: spring(0, {stiffness: 66, damping: 21})
};
};
render() {
return (
<div className={styles.root}>
<TransitionMotion
willLeave={this.willLeave}
defaultStyles={this.getDefaultAnimationStyles()}
styles={this.getAnimationStyles()}>
{this.getContent}
</TransitionMotion>
</div>
);
}
}
问题是 interpolatedStyles 数组在商店更新时不会更新 . 首先， this.props.store.visibleItems 数组只有一个项目 . 这逐渐增加到两个以上，并且 getDefaultAnimationStyles() 和 getAnimationStyles() 返回更新的样式，但 interpolatedStyles 不会更新以包含新项目 .