Руководство React-Transition-Group API
View more Tutorials:
Перед тем как дать ответ на вопрос что такоеi React Transition? Мы изучим принцип что такое "Transition" (Переход)?
OK, например у вас есть белый фоновый элемент <div>, когда пользователь выполняет определенное действие с данным элементом, например двигает курсор на его поверхности, размер <div> увеличивается в 2 раза и фоновый цвет становится желтым.

На самом деле, когда курсор двигается на поверхности <div>, перемена происходит мгновенно. При этом вы хотите, чтобы изменение произошло в течении определенного времени, это интереснее для пользователя.

То о чем я говорю, является анимационным эффектом происходящим в процессе перехода. Почти все настоящие браузеры поддерживают CSS3, и вы можете использовать CSS Transition чтобы создать данный процесс перехода.
React Transition
React-transition-group является библиотекой разработанной сообществом программистов React, она предоставляет нужные component для использования в приложении React, помогает вам создать анимационный эффект во время перехода, так же помогает вам легче работать с CSS Transition.
Данная библиотека предоставляет следующие component:
- Transition
- CssTransition
- TransitionGroup
С приложением React в среде NodeJS вам нужно установить библиотеку react-transition-group:
# Install react-transition-group library: npm install react-transition-group --save
Для приложения React со стороны client:
<!-- Check other version at: https://cdnjs.com/ --> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.4.0/react-transition-group.min.js"></script>
Ниже является изображение использования React Transition, чтобы создать эффект в приложении React:

Компонент Transition позволяет вам описать transition (переход), чтобы конвертировать данный статус интерфейса в новый статус интерфейса в определенном времени.
Компонент Transition содержит единственный прямой подкомпонент или функцию для возвращениия единственного элемента.
// Contains only one direct child element <ReactTransitionGroup.Transition ... > <MySingleElement> <MyOtherElements /> </MySingleElement> </ReactTransitionGroup.Transition> // Contains a function, which returns a single element. <ReactTransitionGroup.Transition ... > {(stateName) => { // stateName: 'entering', 'entered', 'exiting', 'exited'. return ( <MySingleElement> <MyOtherElements /> </MySingleElement> ) } } </ReactTransitionGroup.Transition>
** Transition Component **
<ReactTransitionGroup.Transition in = {true/false} unmountOnExit = {true/false} mountOnEnter = {true/false} appear = {true/false} enter = {true/false} exit = {true/false} timeout = {{ enter: 1500, exit: 2500 }} addEndListener = .. onEnter = .. onEntering = .. onEntered = .. onExit = .. onExiting = .. onExited = .. onFucus = .. onClick = .. .... > </ReactTransitionGroup.Transition>
Callback functions:
- onEnter
- onEntering
- onEntered
- onExit
- onExiting
- onExited
props: in
Для компонента <Transition>. 'in' является самым важным props.
- Когда значение 'in' переходит из true в false, он выдает (raise) по порядку 3 события onEnter, onEntering, onEntered.
- Наоборот, если значение 'in' переходит из false в true он выдает (raise) по порядку 3 события onExit, onExiting, onExited.

props: timeout
props: timeout
<!-- Example 1 (enter = 1500, exit = 2500 ms) --> <ReactTransitionGroup.Transition timeout = {{ enter: 1500, exit: 2500 }} .... > </ReactTransitionGroup.Transition> <!-- Example 2 (enter = exit = 1500 ms) --> <ReactTransitionGroup.Transition timeout = 1500 .... > </ReactTransitionGroup.Transition>

Когда значение 'in' меняется из false в true, компонент <Transition> переходит в статус 'entering', и держится в данном статусе 'timout' милисекунду, после этого он меняется в статус 'entered'.
Наоборот, когда значение 'in' меняетя из true в false, компонент <Transition> переходит в статус 'exiting', и держится в данном статусе 'timout' милисекунду, после этого он меняется в статус 'exited'.
props: enter
- type: boolean
- default: true
Включить (enable) или отключить (disable) 'enter' transition.
props: exit
- type: boolean
- default: true
Включить (enable) или отключить (disable) 'exit' transition.
props: mountOnEnter
- type: boolean
- default: false
<ReactTransitionGroup.Transition mountOnEnter = {true/false}> <!-- Child Component --> <MySingleElement> <MyOtherElements /> </MySingleElement> </ReactTransitionGroup.Transition>
По умолчанию, подэлемент у <Transition> прикрепляется (mount) к родительскому компоненту <Transition> немедленно, поэтому он отобразится для пользователя. Но если вы хотите, чтобы подкомпонент был прикреплен (mount) ленивым способом (lazy), используйте props: mountOnEnter.
<Transition mountOnEnter = {true}>: значит подкомпонент будет прикреплен (mount) к <Transition> когда статус <Transition> будет 'entered'.
props: unmountOnExit
- type: boolean
- default: false
<ReactTransitionGroup.Transition unmountOnExit = {true/false} > <!-- Child Component --> <MySingleElement> <MyOtherElements /> </MySingleElement> </ReactTransitionGroup.Transition>
<Transition unmountOnExit={true}> : значит когда компонент <Transition> переходит в статус 'exited' он будет unmount (откреплен) от всех своих подкомпонентов, это значит подкомпонент у <Transition> будет устранен.
props: appear
- TODO
addEndListener
Позволяет вам добавить кастомиизрованную функцию в середину процесса transition (перехода), как в изображении ниже:

-

// Example: addEndListener={(node, done) => { console.log(node); console.log(done); // Use the css 'transitionend' event to mark the finish of a transition // @see more: https://developer.mozilla.org/en-US/docs/Web/Events/transitionend node.addEventListener('transitionend', done, false); }} // See on Console Log: // console.log(done): ƒ (event) { if (active) { active = false; _this4.nextCallback = null; callback(event); } }
На самом деле, вам нужен только компонент <Transition> чтобы сделать все с transition. Но вам может понадобиться компонент <CSSTransition> в некоторых случаях, так как он поддерживает вас в легкой работе с CSS Transition.
Компонент <CSSTransition> имеется все props похожие на компонент <Transition>, и имеет дополнительный props это classNames.
** CSSTransition Component **
<ReactTransitionGroup.CSSTransition in = .. classNames = "yourClassNamePrefix" unmountOnExit mountOnEnter timeout = {{ enter: 1500, exit: 2500 }} onEnter = .. onEntering = .. onEntered = .. onExit = .. onExiting = .. onExited = .. onFucus = .. onClick = .. .... > </ReactTransitionGroup.CSSTransition>
props: "classNames" является отличием между 2-мя компонентами <CSSTransition> и <Transition>.
Когда значение props: 'in' меняется из false в true, <CSSTransition> меняет статус в 'entering', и держит данный статус 'timeout' милисекунду, перед тем как перейти в статус 'entered'. В этом процессе классы CSS будут применены для подкомпонентов у <CSSTransition>, как в изображении ниже:

Когда значение props: 'in' меняется из true в false, <CSSTransition> меняет статус в 'exiting', и держит данный статус 'timeout' милисекунду, перед тем как перейти в статус 'exited'. В этом процессе классы CSS будут применены для подкомпонентов у <CSSTransition>, как в изображении ниже:

props: 'classNames' так же может получить значение в виде объекта:
classNames={{ appear: 'my-appear', appearActive: 'my-active-appear', enter: 'my-enter', enterActive: 'my-active-enter', enterDone: 'my-done-enter, exit: 'my-exit', exitActive: 'my-active-exit', exitDone: 'my-done-exit, }}
Компонент <TransitionGroup> управляет коллекцией <Transition> (Или <CSSTransition>) в одном списке. Похоже на <Transition> & <CSSTransition>, <TransitionGroup> помогает управлять mount & unmount (прикрепить и открепить) компоненты со временем.
<ReactTransitionGroup.TransitionGroup appear = {true/false} enter = {true/false} exit = {true/false} childFactory = {a function} > .... </ReactTransitionGroup.TransitionGroup>