当状态变为 true 时，React 中的 CSS 转换不起作用

Question

我有一个错误栏，需要在 时缓入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在他的 CodePen 示例中提供的内容及其变体，但无法重现结果。

另外，根据以下声明我确实修改了一些内容：

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

示例：如果您的默认状态是显示消息，那么您始终希望该类位于该 div 上。

由于我的默认状态是hide-messages，所以我最终得到了以下结果。另外，我确实将他的示例中的三元组从show-messages.hide-messagesshow-messages 更改为 hide-messages`。我查看了 CodePen 示例中 DOM 的渲染方式，后者是如何更改类的，所以我对此进行了更改。还是没有运气。

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;
        }
    }
}

这就是它的样子。所以默认情况下没有红色横幅，它应该会逐渐消失。

Answer 1

三元作为开关是正确的，但实现是您面临问题的地方。在 CSS 转换中，您需要一个默认状态并在其上打开或关闭其他状态。

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

示例：如果您的默认状态是显示消息，那么您始终希望该类位于该 div 上。

<div className={ errors ? 'show-messages' : 'show-messages.hide-messages' }>

然后你将不得不改变你的CSS

.show-messages {
  visibility: visible;
  transition: height 0.3s ease-in;
  height:200px;
  width: 200px;
  background: #d8d8d8;
}

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

我创建了一个codepen https://codepen.io/anon/pen/gKmpgw你将不得不使用你想要动画的CSS属性