CODEWITHSUNDEEP
javascriptreactjsanimationreduxreact-motion
earthling
earthling

Reputation: 565

React Motion interpolated styles not updating

I am trying to do a mount/unmount animation for a list of items (coming from Redux) using React Motion's TransitionMotion (docs):

// 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>
        );
    }
}

The problem is that the interpolatedStyles array doesn't update when the store updates. To start with, the this.props.store.visibleItems array only has one item. This gradually increases to two and more and getDefaultAnimationStyles() and getAnimationStyles() return the updated styles but interpolatedStyles doesn't update to include the new items.

Upvotes: 1

Views: 255

Answers (0)

Related Questions