CSST Переход из группы-перехода не завершается
Пытаюсь привыкнуть к компоненту CSSTransiction. Мне нужно показать панель, которая анимирована с помощью CSS-классов. Первый класс определяет основное местоположение, второй определяет положение при открытии панели (вверху: 0).
Появление работает, а выход - нет. onEntered срабатывает, onExied - нет.
Отсутствует документация по компоненту CSSTransition, пробовал разные комбинации, но безуспешно. Любые идеи?
CSS:
.getSecondLevelPanel{
position: fixed;
left: 450px;
top: -100%;
height: 100%;
width: 400px;
transition: all 250ms ease-out;
}
.getSecondLevelPanelOpened {
top: 0;
}
Компонент React:
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;
На самом деле нет, извините. Буду признателен, если вы опубликуете свое решение, когда найдете его.
Ответы 3
Проблема в вашем CSS и свойствах classNames на вас. Компонент CSSTransition применяет такие классы.
- Классы
appearиenterдобавляются, как только для свойстваinустановлено значение true. appear-activeиenter-activeдобавляются сразу после установки классовappearиenter.appear-doneиenter-doneдобавляются по истечении времени, установленного вtimeout.- классы
exitповторяют шаги 1-3 сразу после того, как свойствоinустановлено в значение 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;
}
Взгляните на этот код, вот как я создаю переходы панелей.
Установить:
npm install react-transition-group
Применение:
import { CSSTransition } from 'react-transition-group';
<CSSTransition
in = {toShow} // boolean value passed via state/props to either mount or unmount this component
timeout = {300}
classNames='my-element' // IMP!
unmountOnExit
>
<ComponentToBeAnimated />
</CSSTransition>
ПРИМЕЧАНИЕ. Обязательно примените следующие стили, используя свойство class в CSS:
.my-element-enter {
opacity: 0;
transform: scale(0.9);
}
.my-element-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 300ms, transform 300ms;
}
.my-element-exit {
opacity: 1;
}
.my-element-exit-active {
opacity: 0;
transform: scale(0.9);
transition: opacity 300ms, transform 300ms;
}
Некоторое время поискав ответы, я понял, что моя проблема связана с моей функцией переключения (onClick = {() => props.onClose ()} в вашем случае). Похоже, моя функция переключения не работала должным образом. Поскольку onEntered запускается с помощью «in {true}», а onExited запускается с «in {false}», вы должны убедиться, что логическое значение изменяется при каждом щелчке по вашему тегу привязки. Глядя на ваш код, кажется, что ваша функция onClose возвращает только функцию void вместо переключения. Попробуйте переключиться между true и false и передать это в параметр in {// toggle function}.
Эй, я столкнулся с той же проблемой, вы нашли решение?