React komponentu sarakstu animēšana ar React Transition Group: Visaptveroša rokasgrāmata

Mūsdienu tīmekļa izstrādē saistošu un dinamisku lietotāja saskarņu (UI) radīšana ir ļoti svarīga, lai uzlabotu lietotāja pieredzi. Komponentu sarakstu animēšana React aplikācijās var ievērojami palīdzēt sasniegt šo mērķi, padarot pārejas plūdenākas un mijiedarbības intuitīvākas. React Transition Group (RTG) ir jaudīga bibliotēka, kas vienkāršo komponentu ienākšanas un iziešanas animāciju pārvaldības procesu. Šī visaptverošā rokasgrāmata jūs iepazīstinās ar visu, kas jums jāzina, lai efektīvi animētu React komponentu sarakstus, izmantojot React Transition Group.

Kas ir React Transition Group?

React Transition Group ir komponentu kopums, kas paredzēts komponentu stāvokļa (ienākšana, iziešana) pārvaldībai laika gaitā, īpaši saistībā ar animācijām. Tā pati par sevi neanimē stilus. Tā vietā tā piedāvā dzīves cikla "āķus" (lifecycle hooks), kas ļauj jums piemērot CSS pārejas, CSS animācijas vai jebkuru citu animācijas tehniku jūsu React komponentiem.

React Transition Group galvenie komponenti

• <Transition>: Pamatkomponents viena bērna elementa animēšanai. Tas nodrošina dzīves cikla "āķus" ienākšanas, iziešanas un starpstāvokļiem.
• <CSSTransition>: Ērts komponents, kas automātiski piemēro CSS klases pārejas fāžu laikā. Šis ir visbiežāk izmantotais komponents vienkāršām CSS pārejām un animācijām.
• <TransitionGroup>: Pārvalda <Transition> vai <CSSTransition> komponentu kopu. Tas ļauj animēt komponentus, kad tie tiek pievienoti sarakstam vai noņemti no tā.

Kāpēc izmantot React Transition Group sarakstu animēšanai?

Lai gan jūs varat ieviest animācijas, izmantojot CSS vai citas JavaScript animācijas bibliotēkas tieši, React Transition Group piedāvā vairākas priekšrocības:

• Deklaratīva pieeja: RTG nodrošina deklaratīvu veidu, kā pārvaldīt animācijas stāvokļus, padarot jūsu kodu lasāmāku un vieglāk uzturamu.
• Dzīves cikla "āķi": Tā piedāvā dzīves cikla "āķus", kas ļauj precīzi kontrolēt animācijas procesu, iedarbinot animācijas noteiktos komponenta dzīves cikla punktos.
• Vienkāršota pārvaldība: Sarakstu animāciju pārvaldība var būt sarežģīta. RTG vienkāršo šo procesu, apstrādājot komponentu pievienošanu un noņemšanu ar saistītajām animācijām.
• Saderība: Nevainojami darbojas ar CSS pārejām, CSS animācijām un citām JavaScript animāciju bibliotēkām, piemēram, GSAP vai Framer Motion.

Darba sākšana: instalēšana un iestatīšana

Pirms sākat, pārliecinieties, ka jums ir iestatīts React projekts. Ja nē, varat to izveidot, izmantojot Create React App:

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

              
                Copy
              
            
          

Tālāk instalējiet React Transition Group:

            npm install react-transition-group
            

              
                Copy
              
            
          

vai

            yarn add react-transition-group
            

              
                Copy
              
            
          

Pamata piemērs: vienkārša saraksta animēšana

Sāksim ar vienkāršu piemēru, lai ilustrētu, kā animēt komponentu sarakstu, izmantojot <CSSTransition> un <TransitionGroup>.

Saraksta komponenta izveide

Vispirms izveidojiet komponentu, kas attēlo vienumu sarakstu.

            // 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(['Item 1', 'Item 2', 'Item 3']);

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

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

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

export default TodoList;
            

              
                Copy
              
            
          

Šajā komponentā:

• Mēs izmantojam useState "āķi", lai pārvaldītu vienumu sarakstu.
• Funkcija handleAddItem pievieno jaunu vienumu sarakstam.
• Funkcija handleRemoveItem noņem vienumu no saraksta.
• Mēs ietinam saraksta vienumus <TransitionGroup>, kas pēc noklusējuma renderē <ul> elementu.
• Katrs saraksta vienums ir ietīts ar <CSSTransition>, kas piemēro CSS klases pārejas fāžu laikā.
• timeout atribūts norāda animācijas ilgumu milisekundēs.
• classNames atribūts norāda bāzes nosaukumu CSS klasēm, kas tiks piemērotas pārejas fāžu laikā.

CSS stilu izveide

Tagad izveidojiet CSS stilus, lai definētu animāciju:

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

Šajā CSS failā:

• .item-enter: Definē elementa sākotnējo stāvokli, kad tas ienāk DOM. Šeit necaurredzamība ir iestatīta uz 0, un elements tiek pārvietots pa kreisi.
• .item-enter-active: Definē elementa gala stāvokli, kad tas ienāk DOM. Šeit necaurredzamība ir iestatīta uz 1, un elements tiek pārvietots atpakaļ uz sākotnējo pozīciju. Pārejas (transition) īpašība definē animācijas ilgumu un veidu.
• .item-exit: Definē elementa sākotnējo stāvokli, kad tas iziet no DOM.
• .item-exit-active: Definē elementa gala stāvokli, kad tas iziet no DOM. Šeit necaurredzamība ir iestatīta uz 0, un elements tiek pārvietots pa kreisi. Pārejas (transition) īpašība definē animācijas ilgumu un veidu.

Komponenta integrēšana jūsu lietotnē

Visbeidzot, integrējiet TodoList komponentu savā galvenajā App komponentā:

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

const App = () => {
  return (
    <div className="App">
      <h1>Animated Todo List</h1>
      <TodoList />
    </div>
  );
};

export default App;
            

              
                Copy
              
            
          

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

            

              
                Copy
              
            
          

Tagad, palaižot lietotni, jums vajadzētu redzēt animētu sarakstu, kurā vienumi plūdeni parādās un pazūd, kad tos pievieno vai noņem.

Progresīvas tehnikas un pielāgošana

Lai gan pamata piemērs sniedz labu sākumpunktu, React Transition Group piedāvā daudz vairāk progresīvu funkciju un pielāgošanas iespēju.

<Transition> komponenta izmantošana

<Transition> komponents nodrošina lielāku kontroli pār animācijas procesu salīdzinājumā ar <CSSTransition>. Tas ļauj definēt pielāgotus atzvanus (callbacks) dažādiem pārejas stāvokļiem.

            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)}>
        Toggle
      </button>
      <Transition in={inProp} timeout={duration}>
        {state => (
          <div style={{
            ...defaultStyle,
            ...transitionStyles[state]
          }}>
            I'm a fade Transition!
          </div>
        )}
      </Transition>
    </div>
  );
};

export default TransitionExample;
            

              
                Copy
              
            
          

Šajā piemērā:

• Mēs izmantojam <Transition> komponentu tieši.
• in atribūts kontrolē, vai komponentam jābūt ienākšanas vai iziešanas stāvoklī.
• <Transition> komponenta bērns ir funkcija, kas kā argumentu saņem pašreizējo pārejas stāvokli.
• Mēs izmantojam pārejas stāvokli, lai piemērotu komponentam dažādus stilus.

JavaScript animāciju bibliotēku izmantošana

React Transition Group var apvienot ar citām JavaScript animāciju bibliotēkām, piemēram, GSAP (GreenSock Animation Platform) vai Framer Motion, lai izveidotu sarežģītākas un izsmalcinātākas animācijas.

Piemērs ar GSAP:

            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)}>
        Toggle
      </button>
      <Transition in={inProp} timeout={duration} onEnter={handleEnter} onExit={handleExit}>
        <div ref={boxRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
          Animated Box
        </div>
      </Transition>
    </div>
  );
};

export default GSAPExample;
            

              
                Copy
              
            
          

Šajā piemērā:

• Mēs izmantojam GSAP, lai animētu komponentu.
• <Transition> komponenta onEnter un onExit atribūti tiek izmantoti, lai iedarbinātu GSAP animācijas.
• Mēs izmantojam useRef, lai iegūtu atsauci uz DOM elementu, kuru vēlamies animēt.

Pielāgotas pārejas klases

Ar <CSSTransition> jūs varat pielāgot klašu nosaukumus, kas tiek piemēroti pārejas fāzēs, izmantojot classNames atribūtu. Tas ir īpaši noderīgi, strādājot ar CSS moduļiem vai citiem stila risinājumiem.

            <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
              
            
          

Tas ļauj jums izmantot aprakstošākus vai specifiskākus klašu nosaukumus savām animācijām.

Labākā prakse React Transition Group lietošanā

Lai nodrošinātu, ka jūsu animācijas ir plūdenas, veiktspējīgas un viegli uzturamas, apsveriet šādas labākās prakses:

• Saglabājiet animācijas vienkāršas: Izvairieties no pārlieku sarežģītām animācijām, kas var ietekmēt veiktspēju. Vienkāršas, smalkas animācijas bieži ir efektīvākas.
• Optimizējiet veiktspēju: Izmantojiet shouldComponentUpdate dzīves cikla metodi vai React.memo, lai novērstu nevajadzīgus pārzīmējumus.
• Izmantojiet aparatūras paātrinājumu: Izmantojiet tādas CSS īpašības kā transform un opacity, lai izmantotu aparatūras paātrinājumu plūdenākām animācijām.
• Nodrošiniet alternatīvas: Apsveriet iespēju nodrošināt alternatīvas animācijas vai statisku saturu lietotājiem ar īpašām vajadzībām vai vecākām pārlūkprogrammām, kas var neatbalstīt noteiktas animācijas tehnikas.
• Testējiet uz dažādām ierīcēm: Pārliecinieties, ka jūsu animācijas labi darbojas uz dažādām ierīcēm un ekrāna izmēriem.
• Pieejamība: Esiet uzmanīgi pret lietotājiem ar kustību jutīgumu. Nodrošiniet iespējas atspējot animācijas.

Biežākās problēmas un to risināšana

Strādājot ar React Transition Group, jūs varat saskarties ar dažām bieži sastopamām problēmām. Šeit ir daži padomi problēmu risināšanai:

• Animācijas neiedarbojas: Pārliecinieties, ka <Transition> komponenta in atribūts vai <CSSTransition> komponenta key atribūts tiek pareizi atjaunināts, kad komponentam būtu jāanimē.
• CSS klases netiek piemērotas: Pārbaudiet savu CSS klašu nosaukumus un pārliecinieties, ka tie atbilst <CSSTransition> komponenta classNames atribūtam.
• Animācijas raustīšanās: Optimizējiet savas animācijas, izmantojot aparatūras paātrinājumu un izvairoties no nevajadzīgiem pārzīmējumiem.
• Negaidīta uzvedība: Rūpīgi pārskatiet React Transition Group dokumentāciju par konkrētu komponentu uzvedību un dzīves cikla "āķiem".

Reālās dzīves piemēri un pielietojums

React Transition Group var izmantot dažādos scenārijos, lai uzlabotu lietotāja pieredzi. Šeit ir daži piemēri:

• Navigācijas izvēlnes: Animējiet navigācijas izvēlņu atvēršanu un aizvēršanu, lai nodrošinātu plūdenāku un saistošāku pieredzi.
• Modālie logi: Animējiet modālo logu parādīšanos un pazušanu, lai piesaistītu lietotāja uzmanību un sniegtu vizuālu atgriezenisko saiti.
• Attēlu galerijas: Animējiet pārejas starp attēliem attēlu galerijā, lai radītu aizraujošāku un vizuāli pievilcīgāku pieredzi.
• Datu tabulas: Animējiet rindu pievienošanu un noņemšanu datu tabulā, lai izceltu izmaiņas un uzlabotu datu vizualizāciju.
• Formu validācija: Animējiet validācijas ziņojumu parādīšanu, lai sniegtu skaidru un tūlītēju atgriezenisko saiti lietotājam.

Alternatīvas animāciju bibliotēkas

Lai gan React Transition Group ir jaudīgs rīks, tā nav vienīgā iespēja React komponentu animēšanai. Šeit ir dažas alternatīvas animāciju bibliotēkas:

• Framer Motion: Populāra bibliotēka, kas nodrošina vienkāršu un intuitīvu API sarežģītu animāciju un mijiedarbību veidošanai.
• GSAP (GreenSock Animation Platform): Profesionāla līmeņa animāciju bibliotēka, kas piedāvā plašu funkciju klāstu un izcilu veiktspēju.
• React Spring: Uz atsperu fizikas balstīta animāciju bibliotēka, kas rada reālistiskas un dabiskas animācijas.
• Anime.js: Viegla JavaScript animāciju bibliotēka ar vienkāršu un elastīgu API.

Noslēgums

React Transition Group ir vērtīgs rīks saistošu un dinamisku lietotāja saskarņu veidošanai, animējot komponentu sarakstus un citus UI elementus. Izprotot galvenos komponentus, dzīves cikla "āķus" un labāko praksi, jūs varat efektīvi izmantot React Transition Group, lai uzlabotu savu React lietotņu lietotāja pieredzi. Eksperimentējiet ar dažādām animācijas tehnikām, izpētiet progresīvas funkcijas un vienmēr piešķiriet prioritāti veiktspējai un pieejamībai, lai radītu patiesi izcilas lietotāja saskarnes.

Šī rokasgrāmata sniedz stabilu pamatu darba sākšanai ar React Transition Group. Iegūstot vairāk pieredzes, jūs varat izpētīt progresīvākas tehnikas un integrēt React Transition Group ar citām animāciju bibliotēkām, lai izveidotu vēl sarežģītākas un vizuāli pievilcīgākas animācijas. Veiksmīgu animēšanu!