Transition¶

Компонент Transition позволяет вам описать переход от одного состояния компонента к другому во времени с помощью простого декларативного API. Чаще всего он используется для анимации монтажа и демонтажа компонента, но также может быть использован для описания состояний перехода на месте.

По умолчанию компонент Transition не изменяет поведение компонента, который он отображает, он только отслеживает состояния "enter" и "exit" для компонентов. Вы сами можете придать смысл и эффект этим состояниям. Например, мы можем добавить стили к компоненту, когда он входит или выходит:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import { Transition } from 'react-transition-group';
import { useRef } from 'react';

const duration = 300;

const defaultStyle = {
    transition: `opacity ${duration}ms ease-in-out`,
    opacity: 0,
};

const transitionStyles = {
    entering: { opacity: 1 },
    entered: { opacity: 1 },
    exiting: { opacity: 0 },
    exited: { opacity: 0 },
};

function Fade({ in: inProp }) {
    const nodeRef = useRef(null);
    return (
        <Transition
            nodeRef={nodeRef}
            in={inProp}
            timeout={duration}
        >
            {(state) => (
                <div
                    ref={nodeRef}
                    style={{
                        ...defaultStyle,
                        ...transitionStyles[state],
                    }}
                >
                    I'm a fade Transition!
                </div>
            )}
        </Transition>
    );
}

Существует 4 основных состояния, в которых может находиться Transition:

• entering
• entered
• exiting
• exited

Состояние Transition переключается с помощью параметра in. При значении true компонент начинает стадию "Enter". Во время этого этапа компонент переходит из текущего состояния перехода в состояние "entering" на время перехода, а затем в состояние "entered" после его завершения. Рассмотрим следующий пример (мы будем использовать хук useState):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import { Transition } from 'react-transition-group';
import { useState, useRef } from 'react';

function App() {
  const [inProp, setInProp] = useState(false);
  const nodeRef = useRef(null);
  return (
    <div>
      <Transition nodeRef={nodeRef} in={inProp} timeout={500}>
        {state => (
          // ...
        )}
      </Transition>
      <button onClick={() => setInProp(true)}>
        Click to Enter
      </button>
    </div>
  );
}

При нажатии на кнопку компонент перейдет в состояние 'entering' и останется там в течение 500 мс (значение таймаута), прежде чем окончательно переключится в состояние 'entered'.

Когда in равно false, происходит то же самое, только состояние переходит из состояния 'exiting' в 'exited'.

Свойства¶

nodeRef¶

Ссылка React на элемент DOM, который должен перейти: https://stackoverflow.com/a/51127130/4671932

• Этот параметр необязателен, но рекомендуется, чтобы избежать использования по умолчанию ReactDOM.findDOMNode, который является устаревшим в StrictMode.
• При использовании свойства nodeRef, node не передается в функции обратного вызова (например, onEnter), поскольку пользователь уже имеет прямой доступ к узлу.

• При изменении key prop Transition в TransitionGroup необходимо предоставить Transition новый nodeRef с измененным key prop (см. test/CSSTransition-test.js).

• type: shape

children¶

Вместо элемента React можно использовать дочернюю function. Эта функция вызывается с текущим статусом перехода ("entering", "entered", "exiting", "exited"), который можно использовать для применения к компоненту пропсов, зависящих от контекста.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<Transition
    nodeRef={nodeRef}
    in={this.state.in}
    timeout={150}
>
    {(state) => (
        <MyComponent
            ref={nodeRef}
            className={`fade fade-${state}`}
        />
    )}
</Transition>

• type: Function | element
• required

in¶

Показать компонент; вызывает состояния входа или выхода

• type: boolean
• default: false

mountOnEnter¶

По умолчанию дочерний компонент монтируется сразу вместе с родительским компонентом Transition. Если вы хотите "лениво смонтировать" компонент при первом переходе in={true}, вы можете установить mountOnEnter. После первого перехода enter компонент останется смонтированным, даже при "выходе", если вы также не укажете unmountOnExit.

• type: boolean
• default: false

unmountOnExit¶

По умолчанию дочерний компонент остается смонтированным после достижения состояния "exited". Установите unmountOnExit, если вы предпочитаете размонтировать компонент после завершения его выхода.

• type: boolean
• default: false

appear¶

По умолчанию дочерний компонент не выполняет переход enter при первом подключении, независимо от значения in. Если вам нужно такое поведение, установите и appear и in в true.

• type: boolean
• default: false

enter¶

Включение или отключение переходов ввода.

• type: boolean
• default: true

exit¶

Включение или отключение переходов выхода.

• type: boolean
• default: true

timeout¶

Продолжительность перехода, в миллисекундах. Требуется, если не указан addEndListener.

Вы можете указать единый таймаут для всех переходов:

1

timeout={500}

или индивидуально:

1
2
3
4
5

timeout={{
 appear: 500,
 enter: 300,
 exit: 500,
}}

• appear по умолчанию принимает значение enter.
• enter по умолчанию равно 0

• exit по умолчанию равно 0

• type: number | { enter?: number, exit?: number, appear?: number }

addEndListener¶

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

1
2
3
4

addEndListener={(node, done) => {
  // use the css transitionend event to mark the finish of a transition
  node.addEventListener('transitionend', done, false);
}}

• type: Function

onEnter¶

Обратный вызов, выполняемый перед применением статуса "entering". Дополнительный параметр isAppearing используется для указания того, происходит ли стадия входа на начальном монтировании.

• type: Function(node: HtmlElement, isAppearing: bool) -> void
• default: function noop() {}

onEntering¶

Обратный вызов, выполняемый после применения статуса "entering". Дополнительный параметр isAppearing используется для указания того, происходит ли стадия входа на начальном монтировании.

• type: Function(node: HtmlElement, isAppearing: bool)
• default: function noop() {}

onEntered¶

Обратный вызов, выполняемый после применения статуса "entered". Дополнительный параметр isAppearing используется для указания того, происходит ли стадия входа на начальном монтировании.

• type: Function(node: HtmlElement, isAppearing: bool) -> void
• default: function noop() {}

onExit¶

Обратный вызов, выполняемый перед применением статуса "exiting".

• type: Function(node: HtmlElement) -> void
• default: function noop() {}

onExiting¶

Обратный вызов, выполняемый после применения статуса "exiting".

• type: Function(node: HtmlElement) -> void
• default: function noop() {}

onExited¶

Обратный вызов, выполняемый после применения статуса "exited".

• type: Function(node: HtmlElement) -> void
• default: function noop() {}

Комментарии