小编use*_*767的帖子

我遇到了复杂动画的问题,其中一个组件必须在另一个组件之前完成动画.在这个例子中,我试图在另一个组件淡入之前淡出组件.我不能使用react-motion或任何第三方库,也不能依赖css转换.这是一个突出问题的工作示例.请注意,"编辑器"和"显示"组件的高度并不总是相同.

使用Javascript

var Editor = React.createClass({
    render: function() {
        return <input type="text" defaultValue={this.props.name} />
    }
});

var Display = React.createClass({
    render: function() {
        return <div>{this.props.name}</div>;
    }
});

var Row = React.createClass({
        getInitialState: function() {
            return {
                isEditing: false
      }
    },
    updateRow: function() {
            this.setState({isEditing: !this.state.isEditing});
    },
    render: function() {
        return (
            <div className="row" onClick={this.updateRow}>
            <React.addons.TransitionGroup>
            {
            this.state.isEditing ?
                <Fade key="e"><Editor name={this.props.name}/></Fade> :
                <Fade key="d"><Display name={this.props.name}/></Fade>
            }
            </React.addons.TransitionGroup>
        </div>);
    }
});

var Table = React.createClass({
    render: function() {
        return …