Reacti komponentide loendite animeerimine React Transition Groupiga: põhjalik juhend

Tänapäevases veebiarenduses on kaasahaaravate ja dünaamiliste kasutajaliideste (UI) loomine kasutajakogemuse parandamiseks ülioluline. Reactis komponentide loendite animeerimine võib sellele eesmärgile oluliselt kaasa aidata, muutes üleminekud sujuvamaks ja interaktsioonid intuitiivsemaks. React Transition Group (RTG) on võimas teek, mis lihtsustab komponentide sisenemise ja väljumise animatsioonide haldamist. See põhjalik juhend juhatab teid läbi kõige, mida peate teadma, et Reacti komponentide loendeid React Transition Groupi abil tõhusalt animeerida.

Mis on React Transition Group?

React Transition Group on komponentide komplekt, mis haldab komponentide olekut (sisenemine, väljumine) aja jooksul, eriti seoses animatsioonidega. See ei animeeri stiile iseseisvalt. Selle asemel pakub see elutsükli konkse (lifecycle hooks), mis võimaldavad teil rakendada oma Reacti komponentidele CSS-üleminekuid, CSS-animatsioone või mis tahes muud animatsioonitehnikat.

React Transition Groupi põhikomponendid

• <Transition>: Põhikomponent ühe alamkomponendi animeerimiseks. See pakub elutsükli konkse sisenemise, väljumise ja vahepealsete olekute jaoks.
• <CSSTransition>: Mugavuskomponent, mis rakendab üleminekufaaside ajal automaatselt CSS-klasse. See on kõige sagedamini kasutatav komponent lihtsate CSS-üleminekute ja animatsioonide jaoks.
• <TransitionGroup>: Haldab <Transition> või <CSSTransition> komponentide komplekti. See võimaldab teil animeerida komponente, kui neid loendisse lisatakse või sealt eemaldatakse.

Miks kasutada React Transition Groupi loendite animeerimiseks?

Kuigi saate animatsioone rakendada otse CSS-i või teiste JavaScripti animatsiooniteekide abil, pakub React Transition Group mitmeid eeliseid:

• Deklaratiivne lähenemine: RTG pakub deklaratiivset viisi animatsiooniolekute haldamiseks, muutes teie koodi loetavamaks ja hooldatavamaks.
• Elutsükli konksud: See pakub elutsükli konkse, mis võimaldavad teil animatsiooniprotsessi täpselt kontrollida, käivitades animatsioone komponendi elutsükli kindlates punktides.
• Lihtsustatud haldamine: Loendite animatsioonide haldamine võib olla keeruline. RTG lihtsustab seda protsessi, tegeledes komponentide monteerimise ja demonteerimisega koos seotud animatsioonidega.
• Ühilduvus: Töötab sujuvalt koos CSS-üleminekute, CSS-animatsioonide ja teiste JavaScripti animatsiooniteekidega nagu GSAP või Framer Motion.

Alustamine: paigaldamine ja seadistamine

Enne alustamist veenduge, et teil on Reacti projekt seadistatud. Kui ei, saate selle luua Create React Appi abil:

            npx create-react-app my-animated-list
cd my-animated-list
            

              
                Copy
              
            
          

Järgmiseks paigaldage React Transition Group:

            npm install react-transition-group
            

              
                Copy
              
            
          

või

            yarn add react-transition-group
            

              
                Copy
              
            
          

Põhinäide: lihtsa loendi animeerimine

Alustame lihtsa näitega, et illustreerida, kuidas animeerida komponentide loendit, kasutades <CSSTransition> ja <TransitionGroup>.

Loendi komponendi loomine

Esmalt looge komponent, mis renderdab elementide loendi.

            // src/components/TodoList.js
import React, { useState } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './TodoList.css';

const TodoList = () => {
  const [items, setItems] = useState(['Element 1', 'Element 2', 'Element 3']);

  const handleAddItem = () => {
    setItems([...items, `Element ${items.length + 1}`]);
  };

  const handleRemoveItem = (index) => {
    const newItems = [...items];
    newItems.splice(index, 1);
    setItems(newItems);
  };

  return (
    <div className="todo-list-container">
      <button onClick={handleAddItem}>Lisa element</button>
      <TransitionGroup className="todo-list" component="ul">
        {items.map((item, index) => (
          <CSSTransition key={item} timeout={500} classNames="item">
            <li>
              {item}
              <button onClick={() => handleRemoveItem(index)}>Eemalda</button>
            </li>
          </CSSTransition>
        ))}
      </TransitionGroup>
    </div>
  );
};

export default TodoList;
            

              
                Copy
              
            
          

Selles komponendis:

• Kasutame useState konksu elementide loendi haldamiseks.
• Funktsioon handleAddItem lisab loendisse uue elemendi.
• Funktsioon handleRemoveItem eemaldab elemendi loendist.
• Mähime loendi elemendid <TransitionGroup>-i, mis renderdab vaikimisi <ul> elemendi.
• Iga loendi element on mähitud <CSSTransition>-i, mis rakendab üleminekufaaside ajal CSS-klasse.
• Atribuut timeout määrab animatsiooni kestuse millisekundites.
• Atribuut classNames määrab üleminekufaaside ajal rakendatavate CSS-klasside baasnime.

CSS-stiilide loomine

Nüüd looge animatsiooni määratlemiseks CSS-stiilid:

            /* src/components/TodoList.css */
.todo-list-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.todo-list {
  list-style: none;
  padding: 0;
  width: 300px;
}

.todo-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  background-color: #f9f9f9;
}

.item-enter {
  opacity: 0;
  transform: translateX(-100%);
}

.item-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 500ms, transform 500ms;
}

.item-exit {
  opacity: 1;
}

.item-exit-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 500ms, transform 500ms;
}

            

              
                Copy
              
            
          

Selles CSS-failis:

• .item-enter: Määratleb elemendi algoleku DOM-i sisenemisel. Siin on läbipaistmatus seatud 0-le ja element on nihutatud vasakule.
• .item-enter-active: Määratleb elemendi lõppoleku DOM-i sisenemisel. Siin on läbipaistmatus seatud 1-le ja element nihutatakse tagasi oma algasendisse. Atribuut transition määrab animatsiooni kestuse ja tüübi.
• .item-exit: Määratleb elemendi algoleku DOM-ist väljumisel.
• .item-exit-active: Määratleb elemendi lõppoleku DOM-ist väljumisel. Siin on läbipaistmatus seatud 0-le ja element nihutatakse vasakule. Atribuut transition määrab animatsiooni kestuse ja tüübi.

Komponendi integreerimine oma rakendusse

Lõpuks integreerige TodoList komponent oma peamisse App komponenti:

            // src/App.js
import React from 'react';
import TodoList from './components/TodoList';
import './App.css';

const App = () => {
  return (
    <div className="App">
      <h1>Animeeritud ülesannete loend</h1>
      <TodoList />
    </div>
  );
};

export default App;
            

              
                Copy
              
            
          

            /* src/App.css */
.App {
  text-align: center;
  padding: 20px;
}

            

              
                Copy
              
            
          

Nüüd, kui käivitate oma rakenduse, peaksite nägema animeeritud loendit, kus elemendid ilmuvad ja kaovad sujuvalt, kui neid lisatakse või eemaldatakse.

Täiustatud tehnikad ja kohandamine

Kuigi põhinäide annab hea lähtepunkti, pakub React Transition Group palju rohkem täiustatud funktsioone ja kohandamisvõimalusi.

Komponendi <Transition> kasutamine

Komponent <Transition> pakub animatsiooniprotsessi üle rohkem kontrolli võrreldes <CSSTransition>-iga. See võimaldab teil määratleda kohandatud tagasikutseid (callbacks) erinevate üleminekuolekute jaoks.

            import React, { useState } from 'react';
import { Transition, TransitionGroup } from 'react-transition-group';
import './TransitionExample.css';

const duration = 300;

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

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

const TransitionExample = () => {
  const [inProp, setInProp] = useState(false);

  return (
    <div>
      <button onClick={() => setInProp(!inProp)}>
        Lülita
      </button>
      <Transition in={inProp} timeout={duration}>
        {state => (
          <div style={{
            ...defaultStyle,
            ...transitionStyles[state]
          }}>
            Ma olen hajuv üleminek!
          </div>
        )}
      </Transition>
    </div>
  );
};

export default TransitionExample;
            

              
                Copy
              
            
          

Selles näites:

• Kasutame otse komponenti <Transition>.
• Atribuut in kontrollib, kas komponent peaks olema sisenemis- või väljumisolekus.
• Komponendi <Transition> alam on funktsioon, mis saab argumendina praeguse üleminekuoleku.
• Kasutame üleminekuolekut, et rakendada komponendile erinevaid stiile.

JavaScripti animatsiooniteekide kasutamine

React Transition Groupi saab kombineerida teiste JavaScripti animatsiooniteekidega nagu GSAP (GreenSock Animation Platform) või Framer Motion, et luua keerukamaid ja viimistletumaid animatsioone.

Näide GSAP-iga:

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

const duration = 500;

const GSAPExample = () => {
  const [inProp, setInProp] = useState(false);
  const boxRef = useRef(null);

  useEffect(() => {
    if (boxRef.current) {
      gsap.set(boxRef.current, { opacity: 0, x: -100 });
    }
  }, []);

  const handleEnter = () => {
    gsap.to(boxRef.current, { opacity: 1, x: 0, duration: duration / 1000 });
  };

  const handleExit = () => {
    gsap.to(boxRef.current, { opacity: 0, x: -100, duration: duration / 1000 });
  };

  return (
    <div>
      <button onClick={() => setInProp(!inProp)}>
        Lülita
      </button>
      <Transition in={inProp} timeout={duration} onEnter={handleEnter} onExit={handleExit}>
        <div ref={boxRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
          Animeeritud kast
        </div>
      </Transition>
    </div>
  );
};

export default GSAPExample;
            

              
                Copy
              
            
          

Selles näites:

• Kasutame komponendi animeerimiseks GSAP-i.
• Komponendi <Transition> atribuute onEnter ja onExit kasutatakse GSAP-i animatsioonide käivitamiseks.
• Kasutame useRef-i, et saada viide DOM-i elemendile, mida soovime animeerida.

Kohandatud üleminekuklassid

<CSSTransition>-iga saate kohandada üleminekufaaside ajal rakendatavaid klassinimesid, kasutades atribuuti classNames. See on eriti kasulik, kui töötate CSS-moodulite või muude stiililahendustega.

            <CSSTransition key={item} timeout={500} classNames={{
  enter: 'my-enter',
  enterActive: 'my-enter-active',
  exit: 'my-exit',
  exitActive: 'my-exit-active',
}}>
  <li>{item}</li>
</CSSTransition>
            

              
                Copy
              
            
          

See võimaldab teil kasutada oma animatsioonide jaoks kirjeldavamaid või spetsiifilisemaid klassinimesid.

React Transition Groupi kasutamise parimad praktikad

Et tagada animatsioonide sujuvus, jõudlus ja hooldatavus, kaaluge järgmisi parimaid praktikaid:

• Hoidke animatsioonid lihtsana: Vältige liiga keerulisi animatsioone, mis võivad jõudlust mõjutada. Lihtsad, peened animatsioonid on sageli tõhusamad.
• Optimeerige jõudlust: Kasutage elutsükli meetodit shouldComponentUpdate või React.memo, et vältida tarbetuid uuesti renderdamisi.
• Kasutage riistvaralist kiirendust: Kasutage sujuvamate animatsioonide jaoks riistvaralise kiirenduse võimendamiseks CSS-i omadusi nagu transform ja opacity.
• Pakkuge varuvariante: Kaaluge varuanimatsioonide või staatilise sisu pakkumist puuetega kasutajatele või vanematele brauseritele, mis ei pruugi teatud animatsioonitehnikaid toetada.
• Testige erinevatel seadmetel: Veenduge, et teie animatsioonid töötavad hästi erinevatel seadmetel ja ekraanisuurustel.
• Juurdepääsetavus: Olge tähelepanelik liikumistundlikkusega kasutajate suhtes. Pakkuge võimalusi animatsioonide keelamiseks.

Levinud probleemid ja veaotsing

React Transition Groupiga töötades võite kokku puutuda mõne levinud probleemiga. Siin on mõned näpunäited veaotsinguks:

• Animatsioonid ei käivitu: Veenduge, et komponendi <Transition> atribuut in või komponendi <CSSTransition> atribuut key oleks õigesti uuendatud, kui komponent peaks animeeruma.
• CSS-klasse ei rakendata: Kontrollige oma CSS-klasside nimesid topelt ja veenduge, et need vastavad komponendi <CSSTransition> atribuudile classNames.
• Animatsiooni hakkerdamine: Optimeerige oma animatsioone, kasutades riistvaralist kiirendust ja vältides tarbetuid uuesti renderdamisi.
• Ootamatu käitumine: Hoolikalt vaadake üle React Transition Groupi dokumentatsioon konkreetse komponendi käitumise ja elutsükli konksude osas.

Reaalse maailma näited ja kasutusjuhud

React Transition Groupi saab kasutada erinevates stsenaariumides kasutajakogemuse parandamiseks. Siin on mõned näited:

• Navigatsioonimenüüd: Animeerige navigeerimismenüüde avamist ja sulgemist sujuvama ja kaasahaaravama kogemuse saamiseks.
• Modaalaknad: Animeerige modaalakende ilmumist ja kadumist, et juhtida kasutaja tähelepanu ja anda visuaalset tagasisidet.
• Pildigaleriid: Animeerige üleminekuid piltide vahel pildigaleriis, et luua kaasahaaravam ja visuaalselt köitvam kogemus.
• Andmetabelid: Animeerige ridade lisamist ja eemaldamist andmetabelis, et esile tõsta muudatusi ja parandada andmete visualiseerimist.
• Vormi valideerimine: Animeerige valideerimissõnumite kuvamist, et anda kasutajale selget ja kohest tagasisidet.

Alternatiivsed animatsiooniteegid

Kuigi React Transition Group on võimas tööriist, pole see ainus võimalus Reacti komponentide animeerimiseks. Siin on mõned alternatiivsed animatsiooniteegid:

• Framer Motion: Populaarne teek, mis pakub lihtsat ja intuitiivset API-d keerukate animatsioonide ja interaktsioonide loomiseks.
• GSAP (GreenSock Animation Platform): Professionaalse tasemega animatsiooniteek, mis pakub laia valikut funktsioone ja suurepärast jõudlust.
• React Spring: Vedrupõhine animatsiooniteek, mis loob realistlikke ja loomuliku välimusega animatsioone.
• Anime.js: Kergekaaluline JavaScripti animatsiooniteek lihtsa ja paindliku API-ga.

Kokkuvõte

React Transition Group on väärtuslik tööriist kaasahaaravate ja dünaamiliste kasutajaliideste loomiseks, animeerides komponentide loendeid ja muid UI elemente. Mõistes põhikomponente, elutsükli konkse ja parimaid praktikaid, saate React Transition Groupi tõhusalt kasutada oma Reacti rakenduste kasutajakogemuse parandamiseks. Katsetage erinevate animatsioonitehnikatega, uurige täiustatud funktsioone ning seadke alati esikohale jõudlus ja juurdepääsetavus, et luua tõeliselt erakordseid kasutajaliideseid.

See juhend annab kindla aluse React Transition Groupiga alustamiseks. Kogemuste kasvades saate uurida täiustatud tehnikaid ja integreerida React Transition Groupi teiste animatsiooniteekidega, et luua veelgi keerukamaid ja visuaalselt köitvamaid animatsioone. Head animeerimist!