当状态为true时,react中的css转换不起作用

我有一个错误条,需要在 error = true 。

在 render() 我有:

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

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

例如,用户尝试登录,如果凭据不正确,服务器将响应,这将导致 this.props.errors 成为 true 和 show-messages 。

不过,我希望酒吧 ease-in 。

这是我尝试过的最新css:

.hidden-messages {
    visibility: hidden;
    transition: width 2s, height 2s;
    -webkit-transition: width 2s, height 4s;
    transition-delay: 5s;
}

.show-messages {
    visibility: visible;
    background-color: #FFF;
    transition: width 2s, height 2s;
    -webkit-transition: width 2s, height 4s;
    transition-delay: 5s;
}

从刚开始 transition: 但没有得到任何地方。在你需要添加的地方阅读 transition-delay 我试过了,但没用。

我认为问题是三元基本上是一个开关,并没有建立任何关系 .hidden-messages 和 .show-messages 或者别的什么。换言之,从容应对…据它所知它是可见的?我该怎么做?

编辑: 我尝试了什么 Jason McFarlane 在他的代码笔示例中提供,以及它的变体,无法复制结果。

另外,根据下面的陈述,我确实修改了一些内容:

如果您想要的状态是隐藏/显示,那么您应该在默认状态之上切换隐藏或显示类。

示例:如果默认状态是显示消息,则始终希望该类位于该div上。

因为我的默认状态是 hide-messages ,我最终得到了下面的结果。而且,我确实把他例子中的三元组从 show-messages.hide-messages 要显示消息,请隐藏消息。我看了DOM是如何在CODEPTN示例中呈现的,后者是如何改变类的,所以我改为这个。仍然没有运气。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { clearMessages } from '../../actions/messages';

import {
    Alert,
    Container
} from 'reactstrap';

import styles from '../../../assets/scss/messages.scss';

class Messages extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
        this.closeMessage = this.closeMessage.bind(this);
    }   

    closeMessage() {
        this.props.clearMessages();
    }

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

        if (errors) {
            return (
                <Alert color='danger'>
                    <i onClick={ this.closeMessage } className='float-right fas fa-times'></i>
                    <span 
                        dangerouslySetInnerHTML={{__html: errors.non_field_errors[0]}}>
                    </span>
                </Alert>
            );
        }
    }

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

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

function mapStateToProps(state) {
    return {
        errors: state.messages.errors 
    }
}

export default connect(mapStateToProps, { clearMessages })(Messages);

@import 'declarations';

#messages {
    position: relative; 
    top: 105px;

    .hide-messages {
        visibility: hidden;
        height: 0;
        width: 0;
    }

    .hide-messages.show-messages {
        visibility: visible;
        background-color: $red;
        transition: height 5s ease-in !important;
        height: 100%;
        width: 100%;
    }

    .alert-danger {
        background-color: $red;
        margin-bottom: 0;
        border: none;
        padding-left: 0;
        padding-right: 0;
        color: white;

        i {
            cursor: pointer;
        }
    }
}

这就是它的样子。因此,默认值是no red banner,它应该可以轻松进入。