文本没有过渡到父元素,它只是立即弹出

Text is not transitioning in with parent element, it just pops up immediately

如果服务器响应错误消息,我会弹出一个栏。

例如,如果他们输入了错误的登录凭据,该栏将 transition: height 0.5s ease-in 显示来自服务器的错误消息,指出凭据不正确。

在一些帮助下,我确实让栏过渡工作了。我现在遇到的问题是在转换完成之前呈现文本,所以它看起来很奇怪。以为它会继承父级的样式,但事实并非如此。无法识别 transition/animation.

这是我的组件:

renderMessage() {
    const { errors } = this.props;

    if (errors) {
        return (
            <div 
                className={
                    errors
                    ?
                    'hide-error-message show-error-message'
                    :
                    'hide-error-message'
                }
            >
                <i 
                    onClick={ this.closeMessage } 
                    className='float-right fas fa-times'>
                </i>
                <div
                    dangerouslySetInnerHTML={{ __html: errors.non_field_errors[0] }}>
                </div>
            </div>
        );
    }
}

render() {
    const { errors } = this.props;

    return (
        <div id='error-messages'>
            <div 
                className={ 
                    errors 
                    ? 
                    'hide-error-messages-bar show-error-messages-bar' 
                    : 
                    'hide-error-messages-bar' 
                }>
                <Container>{ this.renderMessage() }</Container>
            </div>
        </div>
    )
}

这是 Sass 的最新版本。尝试了大约 20 种其他东西:

#error-messages {
    position: relative; 
    top: 105px;
    background-color: $croner-red;        
    color: #FFF;

    .hide-error-messages-bar {
        visibility: hidden;
        height: 0;
        transition: height 0.5s ease-out;        
    }

    .hide-error-messages-bar.show-error-messages-bar {
        visibility: visible;
        transition: height 0.5s ease-in;
        height: 65px;
        width: 100%;

        .hide-error-message {
            opacity: 0;
            height: 0;
            padding: 8px 0;
            transition: opacity 2s ease-in;                        
        }

        .hide-error-message.show-error-message {
            opacity: 1;

            i {
                cursor: pointer;
            }
        }
    }
}

调高 transform: translateY() 的高度过渡。由于您的通知栏不在流程中并且不会影响任何其他元素,只需将其上下移动 Y 访问即可。您可以保持 div 的高度,这样文字就不会发生变化和乱七八糟。

这是一个codepen,用https://codepen.io/anon/pen/oyZPJQ

按钮切换class
   .hide-error-messages-bar {
        transform: translateY(-100vh);
        transition: transform 0.5s ease-out;        
    }

    .hide-error-messages-bar.show-error-messages-bar {
        transform: translateY(5vh);
        width: 100%;
   }