willEnter not working

[gabrielalan]

Hello guys, sorry for posting again almost on the same day, but I need to clear my mind about willEnter function.

I'm trying to use the TransitionMotion example from the README:

You'll be notice that I added willEnter no the example, but when I add the element, the animation dont fire for this new element. What I'm doing wrong? Thanks

Ps: I'm not using ES2016.

var React = require('react');
var Motion = require('reactor/node_modules/react-motion');
var TransitionMotion = Motion.TransitionMotion;
var spring = Motion.spring;

const Demo = React.createClass({
    getInitialState() {
        return {
            items: [{key: 'a', size: 10}, {key: 'b', size: 20}, {key: 'c', size: 30}],
        };
    },
    componentDidMount() {
        this.setState({
            items: [{key: 'a', size: 10}, {key: 'b', size: 20}], // remove c.
        });
    },
    willLeave() {
        // triggered when c's gone. Keeping c until its width/height reach 0.
        return {width: spring(0), height: spring(0)};
    },
    willEnter(key) {
        return {key, width: 0, height: 0};
    },
    add() {
        this.setState({
            items: [...this.state.items, {key: 'd', size: 20}]
        });
    },
    render() {
        return (
            <div>
                <a href="#" onClick={this.add}>add</a>

                <TransitionMotion
                    willLeave={this.willLeave}
                    willEnter={this.willEnter}
                    styles={this.state.items.map(item => ({
                        key: item.key,
                        style: {width: item.size, height: item.size},
                    }))}>
                    {interpolatedStyles =>
                        // first render: a, b, c. Second: still a, b, c! Only last one's a, b.
                        <div>
                            {interpolatedStyles.map(config => {
                                return <div key={config.key} style={Object.assign({}, config.style, { border: '1px solid'})} />
                            })}
                        </div>
                    }
                </TransitionMotion>
            </div>
        );
    },
});

module.exports = Demo;

[xialvjun]

Yes, I came up this problem too. And after I add defaultStyles, it works. I don't know why willEnter doesn't work. Eh, well, my problem is there was no animation after first rendering, not adding. Left my words out.

[gabrielalan]

I realize that is necessary to use spring on the styles prop, like this:

styles={this.state.items.map(item => ({ key: item.key, style: {width: spring(item.size), height: spring(item.size)}, }))}

So thanks guys, I think that resolves the problem.

[xialvjun]

Ah, haha, -_-! I didn't notice it....

[ladz]

This is not mentioned in the documention, or have I overlooked anything? Is there a reason for that?