Question

我不明白这里有什么不对，我以前做过这件事，我确信这就是方法。我甚至复制并粘贴了两个单独的例子。只是尝试让CSS转换组继续运行，以便在单击按钮并且状态发生更改时，会显示正确的组件，但会产生效果。我什么都没得到

显示的组件取决于状态值：1,2或3.我只是希望当状态发生变化而另一个组件正在显示而不是之前的那个组件，因为有一个动画可以让一个假，另一个到达

无论可见组件是什么，很明显有一种方法可以在选项之间来回导航，因为每个选项都会发送一个onClick方法来改变类的状态

import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

class LoginClass extends Component{
    constructor(props) {
        super(props);

        this.state = {loginCompState: 0};

        this.showInitial = this.showInitial.bind(this);
        this.showPro = this.showPro.bind(this);
        this.showUser = this.showUser.bind(this);
    }

    showPro(){
      this.setState({
        loginCompState: 1
      });
    };

    showUser(){
      this.setState({
        loginCompState: 2
      });
    };

    showInitial(){
      this.setState({
        loginCompState: 0
      });
    };

    render(){
        return(
            <div>
                <ReactCSSTransitionGroup
                    transitionName='fade'
                    transitionEnterTimeout={500}
                    transitionLeaveTimeout={500}>
                    {(this.state.loginCompState === 0) ? 
                            <InitialComp proOnClick={this.showPro} userOnClick={this.showUser} /> : 
                            (this.state.loginCompState === 1) ? 
                                <ProLoginChoices backInitial={this.showInitial} /> : 
                                <UserLoginChoices backInitial={this.showInitial} />} 
                </ReactCSSTransitionGroup>
            </div>
        )
    }
}

随附CSS：

.fade-enter {
    right: 100px;
}

/* End State of Animation */
.fade-enter-active {
    right: 0px;
    transition: .5s ease-in all;
}

使用onClick through状态

0 个答案: