Question

我是React的新手，正在寻求帮助。

我正在尝试构建一个简单的登录页面。该页面为用户提供三个选项（“通过电子邮件登录”，“通过Google登录”或“注册”），并根据所选的选项显示一个组件。

我想在这些组件进入和退出DOM时添加一个简单的淡入淡出功能，所以我转向了react-transition-group。

但是，问题是我的组件无法退出并不能正确进入。旧的组件似乎立即消失而不是消失，两个“新”组件的副本彼此堆叠。一个淡入淡出，另一个淡入淡出。新旧之间并没有按照我的意愿优雅地淡入淡出。

示例：

Initial login page

On click, two copies of the 'new' component appear, one fades in and the other fades out

transition completes and container now holds the new component as desired

我已经查看了the docs中的react-transition-group，但是我不太清楚自己在做什么错。

这是我的主要组成部分：

class LoginPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            display: "loginInitial"
        }
    };

    handleEmailLogin = () => {
        this.setState(() => ({
            display: "emailLogin"
        }))     
    };

    handleGoogleLogin = () => {
        console.log("Logging in with google!")
        this.props.startGoogleLogin()
    };

    handleEmailSignUp= () => {
        this.setState(() => ({
            display: "emailSignUp"
        }))     
    };

    handleBackToStart = () => {
        this.setState(() => ({
            display: "loginInitial",
        }))     
    }

    displayBox = () => {
        if (this.state.display === "loginInitial") {
            return <LoginPageInitial
                handleEmailLogin={this.handleEmailLogin}
                handleGoogleLogin={this.handleGoogleLogin}
                handleEmailSignUp={this.handleEmailSignUp}
                />
        } else if (this.state.display === "emailSignUp") {
            return <LoginPageEmailSignUp
                handleBackToStart={this.handleBackToStart}
                    />
        } else if (this.state.display === "emailLogin") {
            return <LoginPageEmailLogin
                handleBackToStart={this.handleBackToStart}
                    />
        }
    }

    render() {
        return (
            <div className="box-layout">
            <div className="box-layout__box">
                <h1 className="box-layout__title">My app</h1>
                <p>Subtitle goes here blah blah blah blah.</p>
                    <TransitionGroup>
                            <CSSTransition
                                classNames="fade"
                                timeout={600}
                                key={this.state.display}
                            >
                            {this.displayBox}
                            </CSSTransition>
                    </TransitionGroup>
            </div>
        </div>
        )
    };
}

const mapDispatchToProps = (dispatch) => ({
    startGoogleLogin: () => dispatch(startGoogleLogin())
})

export default connect(undefined, mapDispatchToProps)(LoginPage)

这是相关的CSS：

.box-layout {
    align-items: center;
    background: url('/images/bg.jpg');
    background-size: cover;
    display: flex;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

.box-layout__box {
    background: fade-out(white,.15);
    border-radius: 3px;
    text-align: center;
    width: 30rem;
    padding: $l-size $m-size
}

.box-layout__title {
    margin: 0 0  $m-size 0;
    line-height: 1;
}

// FADE
// appear
.fade-appear {
    opacity: 0;
    z-index: 1;
}

.fade-appear.fade-appear-active {
    opacity: 1;
    transition: opacity 600ms linear;
}

// enter
.fade-enter {
    opacity: 0;
    z-index: 1;    
}

.fade-enter.fade-enter-active {
    opacity: 1;
    transition: opacity 600ms linear;    
}

// exit
.fade-exit {
    opacity: 1;
}

.fade-exit.fade-exit-active {
    opacity: 0;
    transition: opacity 600ms linear;    
}

如果有人可以提供一些建议，我将非常感激。我已经进行了大量谷歌搜索，但是找不到解决我问题的方法。

[编辑：：大多数问题已解决-我设法解决了大部分问题。看来我需要将“关键”道具放置在组件中而不是组件中。 “新”组件的两个版本不再出现，并且容器不会拉伸。但是，看来“旧”组件仍然没有像我预期的那样淡出。它看起来比以前要好得多。我欢迎对我做错的事情或如何改进我的代码有任何进一步的了解。）

使用react-transition-group退出和输入动画的问题

0 个答案: