在React中使用css显示转换

我正在尝试实现与上面类似的功能,但我的代码处于React中

    import PropTypes from 'prop-types';
import React, { Component } from 'react';
import ClassNames from 'classnames/bind';
import SlidePanel from 'yoda-site-components/lib/components/SlidePanel/SlidePanel';
import TokenProvider from 'yoda-site-components/lib/helpers/TokenProvider/TokenProvider';

// wrappers
import LoginWrapper from './wrappers/LoginWrapper';
import CreateAccountWrapper from './wrappers/CreateAccountWrapper';
import PasswordResetWrapper from './wrappers/PasswordResetWrapper';
import Welcome from './wrappers/Welcome';
import * as styles from './SignInSlider.css';

const cx = ClassNames.bind(styles);

class SignInSlider extends Component {
    static propTypes = {
        isOpenPanel: PropTypes.bool,
        onClosePanel: PropTypes.func.isRequired,
        signInDetails: PropTypes.objectOf(PropTypes.object).isRequired,
        createAccount: PropTypes.objectOf(PropTypes.object).isRequired,
        preferences: PropTypes.objectOf(PropTypes.object).isRequired,
        messagesTexts: PropTypes.objectOf(PropTypes.object).isRequired,
        deviceType: PropTypes.shape({
            isMobile: PropTypes.bool.isRequired,
            isDesktop: PropTypes.bool.isRequired,
        }).isRequired,
        signInActions: PropTypes.objectOf(PropTypes.func).isRequired,
        createAccountActions: PropTypes.objectOf(PropTypes.func).isRequired,
        passwordResetActions: PropTypes.objectOf(PropTypes.func).isRequired,
        passwordResetDetails: PropTypes.objectOf(PropTypes.object),
        signInSliderActions: PropTypes.objectOf(PropTypes.func).isRequired,
        showCreateAccountPage: PropTypes.bool.isRequired,
        showWelcomePage: PropTypes.bool.isRequired,
        showForgotPasswordPage: PropTypes.bool.isRequired,
    };
    static defaultProps = {
        isOpenPanel: false,
        passwordResetDetails: {
            passwordResetResponse: {},
        },
    };
    constructor() {
        super();
        this.onClickOfCreateAccountButton = this.onClickOfCreateAccountButton.bind(this);
        this.onClickPasswordReset = this.onClickPasswordReset.bind(this);
        this.onClosePanel = this.onClosePanel.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        console.log(nextProps);
        if (nextProps.showWelcomePage) {
            this.timer = setTimeout(() => {
                //this.onClosePanel();
            }, 3000);
        }
    }

    onClickOfCreateAccountButton() {
    const el = document.getElementsByClassName('SignInSlider-loginSlider')[0];
    const el1 = document.getElementsByClassName('SignInSlider-createAccountSlider')[0];

    el.classList.add('animate-show');
    setTimeout(() => {
        this.props.signInSliderActions.openCreateAccountPage();
        el1.classList.add('animate-show');
    }, 800);
}

    onClickPasswordReset() {
        setTimeout(() => {
            this.props.signInSliderActions.openForgotPasswordResetPage();
        }, 800);
    }

    onClosePanel() {
        this.timer && clearTimeout(this.timer);
        this.props.signInSliderActions.resetSignInSlider();
        this.props.onClosePanel();
    }

    render() {
        const { deviceType, preferences, messagesTexts, signInDetails, createAccount } = this.props;
        const { showCreateAccountPage, showWelcomePage, showForgotPasswordPage } = this.props;
        return (
            <SlidePanel
                isOpenPanel={this.props.isOpenPanel}
                onClosePanel={this.onClosePanel}>

                <div className={cx('signInSliderPanel')}>

                    <div className={cx('loginSlider')}>
                        { !showCreateAccountPage && !showWelcomePage && !showForgotPasswordPage &&
                        <LoginWrapper
                            signInDetails={signInDetails}
                            deviceType={deviceType}
                            preferences={preferences}
                            messagesTexts={messagesTexts}
                            source="account"
                            actions={this.props.signInActions}
                            onClickOfCreateAccountButton={this.onClickOfCreateAccountButton}
                            onClickPasswordReset={this.onClickPasswordReset}
                            isSignInSliderReq
                    />
                } </div>

                    <div className={cx('createAccountSlider')}>
                        {showCreateAccountPage &&
                        <CreateAccountWrapper
                            createAccount={createAccount}
                            isSignInSliderReq
                            deviceType={deviceType}
                            messagesTexts={this.props.messagesTexts}
                            preferences={this.props.preferences}
                            actions={this.props.createAccountActions}/>} </div>
                    <div className={cx('passwordSlider')}>
                        {showForgotPasswordPage &&
                        <PasswordResetWrapper
                            isSignInSliderReq
                            messagesTexts={messagesTexts.passwordReset}
                            preferences={preferences}
                            createAccountActions={this.props.createAccountActions}
                            actions={this.props.passwordResetActions}
                            passwordResetDetails={this.props.passwordResetDetails}
                            deviceType
               />} </div>
                    <div className={cx('welcomeSlider')}>
                        { showWelcomePage &&
                        <Welcome messagesTexts= {messagesTexts.signInSlider}
                            firstName={TokenProvider.get('DP_USER_NAME')}/>} </div>
                </div>
            </SlidePanel>
        );
    }
}

export default SignInSlider;

单击CreateCount后,我试图切换到下一页,但什么都没有发生:

    .signInSliderPanel {
    position: relative;
    height: 100%;
    width: 422px;

    & .loginSlider {
        height: 100%;
        width: 422px;
        position: absolute;
    }

    & .createAccountSlider {
        height: 100%;
        width: 422px;
    }
}

.animate-show {
    height: 100%;
    width: 422px;
    position: absolute;
    transform: translate3d(-422px, 0, 0);
    transition: all 1.25s linear 0s;
    will-change: transform;
}

我还做了一个密码笔。io代码来模拟我想要的。

https://codepen.io/anon/pen/VQdgmV