(Реагировать) CSSTransition с модулями css

Я пытаюсь реализовать CSSTransition в модальном окне в моем проекте. Проблема в том, что я использую модули css.

Мой метод рендеринга модального окна

render() {
        return (
            <Aux>
                <Backdrop
                    show = {this.props.show}
                    clicked = {this.props.modalClosed}/>
                <CSSTransition
                    in = {this.props.show}
                    timeout = {1000}
                    mountOnEnter
                    unmountOnExit
                    classNames = {?}
                >
                    <div
                        className = {classes.Modal}
                    >
                        {this.props.children}
                    </div>
                </CSSTransition>
            </Aux>
        )
    }

Мой Modal.css

    .fade-enter {

    }

    .fade-enter-active {
        animation:openModal 0.4s ease-out forwards;
    }

    .fade-exit{

    }

    .fade-exit-active{
        animation: closeModal 0.4s ease-out forwards;
    }

Что мне передать атрибуту classNames в компоненте CSSTransition, чтобы он заработал?

css reactjs css-transitions

24.12.2018 11:36

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

5 456

Ответы 2

Решается введением таких классов:

    render() {
        return (
            <Aux>
                <Backdrop
                    show = {this.props.show}
                    clicked = {this.props.modalClosed}/>
                <CSSTransition
                    in = {this.props.show}
                    timeout = {1000}
                    mountOnEnter
                    unmountOnExit
                    classNames = {{
                        enterActive: classes["fade-enter-active"],
                        exitActive:classes["fade-exit-active"]
                    }}
                >
                    <div
                        className = {classes.Modal}
                    >
                        {this.props.children}
                    </div>
                </CSSTransition>
            </Aux>
        )
    }

когда я пытаюсь это сделать, я получаю undefined для классов div, которые я оборачиваю.

— 13.05.2019 17:26

Вы определили класс .Modal в своем Modal.css?

— 26.03.2020 13:13

24.12.2018 11:55

JSX:

  <CSSTransition in = {focused} timeout = {500} classNames = {{
    enterActive: styles.MyClassEnterActive,
    enterDone: styles.MyClassEnterDone,
    exitActive: styles.MyClassExit,
    exitDone: styles.MyClassExitActive
  }}>
    <span className = {styles.MyClass}>animated</span>
  </CSSTransition>

Модуль CSS:

.MyClass {
  position: absolute;
  left: 5px;
}
.MyClassEnterActive {
  left: 15px;
  transition: left 500ms;
}
.MyClassEnterDone {
  left: 15px;
}
.MyClassExit {
  left: 15px;
}
.MyClassExitActive {
  left: 5px;
  transition: left 500ms;
}

Gracias Лайонел!

10.06.2020 19:47