CSST-переход из группы реакции-перехода не завершается - PullRequest
Новая
       25

CSST-переход из группы реакции-перехода не завершается

0 голосов
/ 29 мая 2018

Попытка привыкнуть к компоненту CSSTransiction.Мне нужно показать панель, которая анимируется с помощью CSS-классов.Первый класс определяет основное местоположение, второй определяет положение, когда панель открыта (top: 0).

Появление работает, но выход не работает.onEntered запускает, onExied нет.

Отсутствует документация для компонента CSSTransition, я пробовал разные комбинации, но безуспешно.Есть идеи?

CSS: 

.getSecondLevelPanel{
    position: fixed;
    left: 450px;
    top: -100%;
    height: 100%;
    width: 400px;
    transition: all 250ms ease-out;
}

.getSecondLevelPanelOpened {
    top: 0;
}

Реагирующий компонент: 

import * as React from 'react';
import { CSSTransition } from 'react-transition-group';

export interface Props {
    isVisible: Boolean;
    children: React.ReactChild;
    onClose: () => void;
}

const SecondLevelPanel = (props: Props) => {
  return (
    <CSSTransition
        timeout={{
            enter: 0,
            exit: 500
        }}
        in={props.isVisible}
        appear={true}
        enter={true}
        exit={true}
        classNames={{
            appear: 'getSecondLevelPanel',
            enterDone: 'getSecondLevelPanel getSecondLevelPanelOpened',
            exit: 'getSecondLevelPanel'
        }}
        unmountOnExit={true}
        onEntered={() => {
            alert('entered');
        }}
        onExited={() => {
            alert('exited');
        }}
    >
        <div>
            <a onClick={() => props.onClose()}>Close</a>
            {props.children}
        </div>
    </CSSTransition>
  );
};

export default SecondLevelPanel;

1 Ответ

0 голосов
/ 23 сентября 2018

Проблема в том, что ваши CSS и classNames поддерживают вас.Компонент CSSTransition применяет классы следующим образом.Классы

  1. appear и enter добавляются, как только для свойства in установлено значение true.
  2. appear-active и enter-active добавляются сразу послеappear и enter классы установлены.
  3. appear-done и enter-done добавляются после установленной продолжительности в timeout пройденных.
  4. классы exit повторяют Шаг1-3 сразу после того, как для in prop установлено значение false.

Причина, по которой вы выходите из вызовов, не работает, вероятно, из-за установки только одного класса выхода и 0 для вашего вводапродолжительность.Попробуйте установить правило перехода для классов active, чтобы убедиться, что переход установлен на всю продолжительность перехода, и отделите движущуюся часть от статической.Вот так 

.panel{
    position: fixed;
    left: 450px;
    top: -100%;
    height: 100%;
    width: 400px;
}

.panel-appear,
.panel-enter {
   top: -100%;
}

.panel-appear-active,
.panel-enter-active {
    top: 0;
    transition: all 250ms ease-out;
}

.panel-exit {
    top: 0;
}

.panel-exit-active {
    top: -100%
    transition: all 250ms ease-out;
}

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

...