Motion

A Motion adapter a Motion DOM-animációs sorozatait használja. Telepítse a nyilvános csomagot és a Motiont:

pnpm add glazejs motion

import glaze from "glazejs"
import { createMotionAdapter } from "glazejs/motion"
import { animate, stagger } from "motion"

const animations = glaze({
  adapter: createMotionAdapter({ animate, stagger }),
  breakpoints: { md: "(min-width: 768px)" },
  defaults: { element: "duration-0.6" },
  presets: { rise: "from:opacity-0|y-24" },
})

<div data-animate="preset-rise"></div>
<div data-animate="from:opacity-0 to:opacity-1|x-120"></div>
<div data-animate="@md:from:rotate-180|scale-0.5"></div>

Ehhez a beállításhoz nincs szüksége a GSAP csomagra. Az alapvető elemzés, az alapértelmezések, a szelektorok, az előbeállítások, a figyelés és az életciklus-metódusok mindkét motorban közösek.

A Motion 14.6 DOM-deklarációi a @types/react által biztosított típust használják. Szigorú TypeScript projektekben, amelyek ellenőrzik a függőségek deklarációit, telepítse a típusokat fejlesztési függőségként is. Magára a React csomagra nincs szükség:

pnpm add -D @types/react

Adja hozzá a "react" csomagot az compilerOptions.types fájlhoz, ha az TypeScript konfigurációja korlátozza a környezetből elérhető típuscsomagokat.

Támogatott értékek

• Motion DOM-tulajdonságok numerikus vagy szöveges értékekkel, például átlátszóság, transzformációk és színek.
• from, to, valamint párosított from/to állapotok. A from animáció az elem természetes stílusával ér véget, ha nincs megadva to érték.
• Numerikus duration, delay, repeatDelay és stagger értékek másodpercben.
• Az elem repeat értékei 0 és 19 között, valamint logikai yoyo. Hosszabb vagy végtelen ismétléshez használja az idővonal ismétlési beállítását.
• Idővonal-defaults, delay, repeatDelay, repeat és yoyo; az idővonal repeat--1 beállítása végtelenül ismétel.
• Numerikus idővonalpozíciók, egymást követő elhelyezés, <, > és relatív eltolások, például +=0.2, -=0.2 és <+=0.2.
• A Motion névvel ellátott easingjei, linear/none, valamint az elterjedt GSAP easingnevek: power0-től power4-ig, továbbá sine, expo, circ és back, .in, .out vagy .inOut utótaggal.
• GSAP forgatási álnevek, például a rotation, amely a Motion rotate értékére van leképezve.

Például a gyermekelemek animálása egymás után, átfedéssel:

<div data-animate="tl defaults:duration-0.6">
  <div data-animate="from:opacity-0|y-24"></div>
  <div data-animate="from:opacity-0|y-24 tl:[-=0.2]"></div>
</div>

Motorspecifikus korlátozások

Az adapter hibát jelez a kizárólag a GSAP motorra érvényes beállításoknál, beleértve a ScrollTrigger beállítást, a GSAP bővítményeket, a autoAlpha értéket, a százalékos transzformációkat, például a xPercent értéket, a visszahívási segédfüggvényeket, a beágyazott attr/css objektumokat és a relatív tulajdonságértékeket, például a x-+=100 értéket. A százalékalapú idővonalpozíciók és az objektumformájú lépcsőzetes beállítások szintén nem támogatottak. Ha ezekre a funkciókra van szükség, használja a GSAP adaptert.

A támogatott segédfüggvények nem jelentik azt, hogy a két motor ugyanúgy interpolál. Az animáció lejátszását és a tulajdonságok interpolációját a Motion kezeli.

Tisztítás

DOM-frissítések után használja a animations.refresh() metódust, vagy engedélyezze a watch beállítást. A bontáskor hívja meg a animations.destroy() metódust. Ez megszakítja a Motion lejátszását, eltávolítja a médiakérdés-figyelőket és a megfigyelőket, majd visszaállítja az eredeti inline stílusokat.