Cодержание

Что такое React Transition?
Transition Component
CSSTransition Component
TransitionGroup Component

Pуководства ReactJS

Руководство React-Transition-Group API

View more Tutorials:

Pуководства ReactJS

Что такое React Transition?
Transition Component
CSSTransition Component
TransitionGroup Component

1- Что такое React Transition?

Перед тем как дать ответ на вопрос что такое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:

2- Transition Component

Компонент Transition позволяет вам описать transition (переход), чтобы конвертировать данный статус интерфейса в новый статус интерфейса в определенном времени.

Пример React-Transition-Group Transition (NodeJS)

Компонент 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


<!-- 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);
   }
}

3- CSSTransition Component

На самом деле, вам нужен только компонент <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>

Пример React-Transition-Group CSSTransition (NodeJS)

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,
}}

4- TransitionGroup Component

Компонент <TransitionGroup> управляет коллекцией <Transition> (Или <CSSTransition>) в одном списке. Похоже на <Transition> & <CSSTransition>, <TransitionGroup> помогает управлять mount & unmount (прикрепить и открепить) компоненты со временем.

<ReactTransitionGroup.TransitionGroup
  appear = {true/false}
 
  enter = {true/false}
  exit = {true/false}

  childFactory = {a function}
  >

  ....

</ReactTransitionGroup.TransitionGroup>

View more Tutorials:

Pуководства ReactJS