TransitionGroup¶

Компонент <TransitionGroup> управляет набором компонентов перехода (<Transition> и <CSSTransition>) в списке. Как и компоненты перехода, <TransitionGroup> представляет собой машину состояний для управления монтированием и размонтированием компонентов во времени.

Рассмотрим пример ниже. По мере удаления или добавления элементов в TodoList пропс in автоматически переключается компонентом <TransitionGroup>.

Обратите внимание, что <TransitionGroup> не определяет никакого поведения анимации! То, как именно анимируется элемент списка, зависит от отдельного компонента перехода. Это означает, что вы можете смешивать и сочетать анимации для разных элементов списка.

Пример¶

Свойства¶

component¶

По умолчанию <TransitionGroup> отображает <div>. Вы можете изменить это поведение, предоставив параметр component. Если вы используете React v16+ и хотите избежать обертывающего элемента <div>, вы можете передать component={null}. Это полезно, если обертывающий div нарушает ваши стили css.

• type: any
• default: 'div'

children¶

Набор компонентов <Transition>, которые переключают "in" и "out" по мере их выхода. Группа <TransitionGroup> будет вводить определенные пропсы перехода, поэтому не забудьте распространить их, если вы оборачиваете <Transition>, как в нашем примере с <Fade>.

Хотя этот компонент предназначен для нескольких дочерних элементов Transition или CSSTransition, иногда вам может понадобиться один дочерний элемент перехода с содержимым, которое вы хотите переходить из одного элемента в другой при его изменении (например, маршруты, изображения и т.д.) В этом случае вы можете изменить пропс key дочернего элемента перехода при изменении его содержимого, что заставит TransitionGroup переходить из одного элемента в другой.

• type: any

appear¶

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

• type: boolean

enter¶

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

• type: boolean

exit¶

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

• type: boolean

childFactory¶

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

Если вам необходимо обновлять дочерний элемент по мере его выхода, вы можете предоставить childFactory, чтобы обернуть каждый дочерний элемент, даже тот, который выходит.

• type: Function(child: ReactElement) -> ReactElement
• default: (child) => child

Комментарии