CSS 当状态变为真时，React 中的转换不工作

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 的地方，所以尝试了但没有用。

我认为三元组的问题基本上是 on/off 开关，并没有真正在 .hidden-messages 和 .show-messages 之间建立任何关系。换句话说，从什么……据它所知它是可见的？我该如何实现？

编辑： 我尝试了他的 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.

由于我的默认状态是 hide-messages，因此我得到了以下结果。此外，我确实将他示例中的三元组从 show-messages.hide-messages 更改为 show-messages hide-messages`。我查看了 DOM 在 CodePen 示例中是如何呈现的，后者是如何改变 class，所以我改成了那个。仍然没有运气。

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 转换中，您需要默认状态并打开或关闭该状态的其他状态。

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

示例：如果您的默认状态是显示消息，您总是希望 class 显示在 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 属性

CSS 当状态变为真时，React 中的转换不工作

CSS transitions in React not working when state becomes true

css

reactjs

reactstrap