CSS-переходы в React не работают, когда состояние становится истинным - PullRequest
Новая
       9

CSS-переходы в React не работают, когда состояние становится истинным

0 голосов
/ 11 июня 2018

У меня есть строка ошибки, которую нужно смягчить при 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 или что-то в этом роде.Другими словами, как легко ... насколько он знает, что это было видно?Как мне это сделать?

РЕДАКТИРОВАТЬ: Я попробовал то, что Джейсон Макфарлейн предоставил в своем примере CodePen, и варианты его, и не смог воспроизвестирезультаты.

Кроме того, основываясь на приведенном ниже утверждении, я изменил несколько вещей:

Если вы хотите скрыть / показать состояние, то вы должны переключить скрытие или показкласс поверх состояния по умолчанию.

Пример: если ваше состояние по умолчанию должно отображать сообщения, вы всегда хотите, чтобы этот класс находился в этом div.

Поскольку мое состояние по умолчаниюэто hide-messages, я закончил с ниже.Кроме того, я изменил троичный в его примере с show-messages.hide-messages на show-messages hide-messages`.Я посмотрел на то, как DOM рендерился в примере CodePen, а последний - на то, как он меняет класс, поэтому я перешел на это.Все еще не повезло. 

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

Вот как это выглядит.Таким образом, по умолчанию нет красного баннера, и он должен ослабнуть.

enter image description here

1 Ответ

0 голосов
/ 11 июня 2018

Тройка верна как выключатель, но реализация - это то, где вы столкнулись с проблемой.При переходе CSS вы хотите состояние по умолчанию и включить или выключить дополнительное состояние.

Если вы хотите скрыть / показать состояние, то вы должны включить класс скрытия или отображения поверхсостояние по умолчанию.

Пример: если ваше состояние по умолчанию состоит в том, чтобы показывать сообщения, вы всегда хотите, чтобы этот класс находился в этом разделе. 

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

Я создал кодовую ручку https://codepen.io/anon/pen/gKmpgw, вам придется поиграться с атрибутами CSS, которые вы хотите анимировать

...