当状态变为 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 -消息。

但是，我希望该栏缓入。

这是我尝试过的最新 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 示例及其变体中提供了该示例，但无法重现结果。

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

If the state you want is to hide/show then you should toggle a hide or show class on top of the default state.

Example: if your default state is to have the messages shown you always want that class to be on that div.

由于我的默认状态是隐藏消息，所以我最终得到了以下结果。另外，我确实将他的示例中的三元从 show-messages.hide-messages 更改为 show-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 属性