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示例中提供的Jason McFarlane及其变体，但无法重现结果。

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

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

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

由于我的默认状态是hide-messages，我最终得到了以下内容。此外，我确实将他的示例中的三元组从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属性

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

1 个答案: