betacode

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

  1. Что такое React Transition?
  2. Transition Component
  3. CSSTransition Component
  4. 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 (переход), чтобы конвертировать данный статус интерфейса в новый статус интерфейса в определенном времени.
Компонент 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);
   }
}

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

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

Show More

Новейшие статьи

Show More