Die Anleitung zu React-Transition-Group API

Was ist React Transition?
Transition Component
CSSTransition Component
TransitionGroup Component

1. Was ist React Transition?

Vor der Anwort der Frage "Was ist React Transition?" werden wir den Begriff "Transition" (die Umwandlung) studieren.

OK, Angenommen, Sie haben ein Element <div> mit dem weißen Hintergrund. Wenn der Benutzer eine Aktion mit diesem Element durchführt, z.B den Zeiger auf seine Fläche bewegen, wird die Größe vom <div> doppelt erhöhen und die Hintergrundfarbe wird in gelb gewechselt.

In der Praxis wenn der Zeiger auf die Fläche <div> bewegt, tritt die Änderung sofort auf. Inzwischen möchten Sie diese Änderung in einem Zeitraum langsam passieren, ist das dem Benutzer mehr interessant.

Das Ding, das ich gerade erwähne, ist eine in den Umwandlungsprozess passierende Animation-Effekt . Meiste Browser unterstützen auch CSS3. Und Sie können CSS Transition verwenden um einen solchen Umwandlungsprozess zu erstellen.

React Transition

React-transition-group ist eine Bibliothek, die durch das Gemeinschaft der Programmer React entwickelt wurde. Es bietet die notwendigen Component an um in die Applikation React zu verwenden. Damit können Sie die Animationeffekt in den Umwandlungsprozess erstellen sowie hilft Ihnen bei dem leichteren Arbeiten mit CSS Transition.

Diese Bibliothek bietet die folgenden Componente an:

Transition
CssTransition
TransitionGroup

Für die Applikation React in die Umwelt NodeJS brauchen Sie die Bibliothek react-transition-group installieren:

# Install react-transition-group library:

npm install react-transition-group --save

Für die Applikation React in die Seite 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>

Unter ist das die Illustration für die Verwendung von React Transition zur Erstellung der Effekt in die Applikation React:

2. Transition Component

Das Element Transition erlaubt Sie, ein Transition zur Umwandlung von einem Interface-Status zu einem neuen Interface-Status in einem Zeitraum zu bezeichnen.

Beispiel React-Transition-Group Transition (NodeJS)

Das Element Transition enthaltet ein einziges direktes Sub-Element oder eine Funktion für die Rückgabe eines einzigen Element.

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

Für das Element <Transition> ist 'in' ein wichtigstes props.

Wenn die Wert vom 'in' von true zu false wandelt, wirft es nacheinander 3 Events onEnter, onEntering, onEntered auf.
Umgekehrt wenn die Wert vom 'in' vom false zu true wandelt, wirft es 3 Events onExit, onExiting, onExited auf.

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>

Wenn die Wert vom 'in' vom false zu true wechlselt, wird das Element <Transition> zum Status 'entering' wechseln und haltet den Status in 'timout' Milisekunden still, danach wechselt zum Status 'entered'.

Umgekehrt wenn die Wert von 'in' vom true zu false wechselt, wird das Element <Transition> zum Status 'exiting' wechseln und haltet den Status in 'timout' Milisekunden still, danach wechselt zum Status 'exited'.

props: enter

type: boolean
default: true

'enter' transition aktivieren (enable) oder deaktivieren (disable)

props: exit

type: boolean
default: true

'exit' transition aktivieren (enable) oder deaktivieren (disable)

props: mountOnEnter

type: boolean
default: false

<ReactTransitionGroup.Transition  mountOnEnter = {true/false}>

    <!-- Child Component -->
    <MySingleElement>
       <MyOtherElements />
    </MySingleElement>

</ReactTransitionGroup.Transition>

Nach Default wird das Sub-Element vom <Transition> mit dem Vater-Element <Transition> sofort eingebindet (mount). Deshalb wird es anzeigen damit der Benutzer sehen kann. Aber wenn Sie das Sub-Element lazy-mount (faul einbinden) möchten, benutzen Sie props: mountOnEnter

<Transition mountOnEnter = {true}>: d.h das Sub-Element wird mit <Transition> eingebindet werden wenn der Status vom <Transition> 'entered' ist

props: unmountOnExit

type: boolean
default: false

<ReactTransitionGroup.Transition  unmountOnExit = {true/false} >

    <!-- Child Component -->
    <MySingleElement>
       <MyOtherElements />
    </MySingleElement>

</ReactTransitionGroup.Transition>

<Transition unmountOnExit={true}>: d.h wenn das Element <Transition> zum Status 'exited' gewandelt wird, wird es seine allen Sub-Elemente demontieren (unmount). D.h die Elemente vom<Transition> werden entfernt.

props: appear

TODO

addEndListener

Ihnen erlauben, eine passende Funktion während des Prozess vom transition einzufügen. Wie die folgende Illustration:

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

In der Praxis brauchen Sie nur das Element <Transition> um alle Dinge mit transition zu tun. Aber Sie können das Element <CSSTransition> in einigen Fällen brauchen, denn es unterstützt Sie, mit CSSTransition leichter zu arbeiten.

Das Element <CSSTransition> hat alle gleichen props wie das Element <CSSTransition> und ein anderes 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>

Beispiel React-Transition-Group CSSTransition (NodeJS)

props: "classNames" ist der Unterschied zwischen 2 Elemente <CSSTransition> und <Transition>.

Wenn die Wert vom props: 'in' vom false zu true ändert, wird <CSSTransition> zum Status 'entering' wechseln und haltet vor der Umwandlung zum Status 'entered' den Status in 'timeout' Milisekunden still. In diesem Prozess werden die Klassen CSS für das Sub-Element von <CSSTransition> wie die folgende Illustration abgewendet:

Wenn die Wert vom props: 'in' vom false zu true ändert, wird <CSSTransition> zum Status 'exiting' wechseln und haltet vor der Umwandlung zum Status 'exited' den Status in 'timeout' Milisekunden still. In diesem Prozess werden die Klassen CSS für das Sub-Element von <CSSTransition> wie die folgende Illustration abgewendet werden:

props: 'classNames' kann eine Wert als ein Objekt annehmen:

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

Das Element <TransitionGroup> managet eine Kombination von <Transition> (oder <CSSTransition>) in einer Liste. Wie <Transition> & <CSSTransition> hilft <TransitionGroup> bei dem Management von mount & unmount (einbinden & entfernen) der Elemente nach der Zeit.

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

  childFactory = {a function}
  >

  ....

</ReactTransitionGroup.TransitionGroup>