Motion

Motioni adapter kasutab Motioni DOM-animatsioonijadasid. Installige avalik pakett ja Motion:

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>

Selle seadistuse jaoks pole GSAP vaja. Põhianalüüs, vaikeväärtused, selektorid, eelseadistused, jälgimine ja elutsükli meetodid on mõlema mootori puhul ühised.

Motion 14.6 DOM-i deklaratsioonid viitavad tüübile, mille pakub @types/react. Range TypeScript puhul tuleb projektides, mis kontrollivad sõltuvuste deklaratsioone, tüübid paigaldada ka arendussõltuvusena. React ennast pole vaja:

pnpm add -D @types/react

Lisage "react" faili compilerOptions.types, kui teie TypeScript konfiguratsioon piirab globaalseid tüübipakette.

Toetatud väärtused

• Motioni DOM-i omadused arv- või stringväärtustega, sealhulgas läbipaistmatus, teisendused ja värvid.
• from, to ja paaris olekud from/to. from animatsioon lõpeb elemendi loomuliku stiiliga, kui väärtust to pole määratud.
• Arvulised väärtused duration, delay, repeatDelay ja stagger sekundites.
• Elemendi repeat väärtused vahemikus 0 kuni 19 ja tõeväärtuslik yoyo. Pikemaks või lõputuks kordamiseks kasutage ajaskaala kordust.
• Ajaskaala defaults, delay, repeatDelay, repeat ja yoyo; ajaskaala kordub lõputult väärtusega repeat--1.
• Arvulised ajaskaala positsioonid, järjestikune paigutus, <, > ja suhtelised nihked, näiteks +=0.2, -=0.2 ning <+=0.2.
• Motioni nimega sujuvused, linear/none ja levinud GSAP sujuvuste nimed: power0 kuni power4, sine, expo, circ ja back koos järelliidetega .in, .out või .inOut.
• GSAP pööramise aliasnimed, näiteks rotation, mis teisendatakse Motioni väärtuseks rotate.

Näiteks animeerige lapsed järjestikku nii, et animatsioonid kattuvad:

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

Mootoripõhised piirangud

Adapter annab vea seadete puhul, mis on saadaval ainult mootoris GSAP, sealhulgas ScrollTrigger, pistikprogrammid GSAP, autoAlpha, protsendipõhised teisendused, näiteks xPercent, tagasihelistamisutiliidid, pesastatud attr/css-objektid ja suhtelised omaduste väärtused, näiteks x-+=100. Protsendipõhised ajaskaala positsioonid ja objektikujuline astmestamine pole samuti toetatud. Kui neid funktsioone on vaja, kasutage adapterit GSAP.

Toetatud utiliidid ei tähenda, et kahe mootori interpoleerimine oleks identne. Motion juhib animatsioonide taasesitust ja omaduste interpoleerimist.

Puhastamine

Kasutage animations.refresh() pärast DOM-i uuendamist või lubage watch. Lõpetamisel kutsuge välja animations.destroy(). See tühistab Motioni taasesituse, eemaldab meediumipäringute kuulajad ja vaatlejad ning taastab algsed tekstisisesed stiilid.