Perėjimai ir animacijos vaidina pagrindinį vartotojo patirties vaidmenį. Tinklalapyje pridėję subtilių animacijų ir perėjimų tarp elementų galite pagerinti vartotojo patirtį. Svetainė atrodys daug sklandesnė, patrauklesnė ir apskritai geresnė.

Ši pamoka parodo, kaip įdiegti perėjimus ir animacijas Vue.js. Sužinosite, kaip sukurti paprastus perėjimus ir sudėtingas animacijas naudojant perėjimas komponentų ir CSS pagrindinių kadrų.

Vue.js pereinamasis komponentas

Vue.js turi įmontuotą perėjimas komponentas, leidžiantis kurti animacijas programoje. Šis komponentas apgaubia tikslinį elementą, kurį norime pagyvinti.

Čia perėjimo komponentas apvynioja pirmojo lygio antraštę:

 Sveiki </h1>
</transition>

Kai apvyniojate elementą su perėjimas komponentas, komponentas taikys perėjimo klases elementui, kurį jis apvynioja. Iš viso yra šešios pereinamosios klasės. Trys valdo elemento animaciją, kai jis patenka į puslapį. Kiti trys valdo elemento animaciją, kai jis palieka puslapį.

Šiame straipsnyje naudojamas kodas pateikiamas čia GitHub saugykla ir jūs galite nemokamai naudotis pagal MIT licenciją.

Pereinamųjų klasių taikymas, kai elementai patenka į puslapį

Kai elementas patenka į DOM, perėjimas komponentas taiko klases įvesti-nuo, įvesti-į, ir įvesti-aktyvus prie jo. Šios klasės leidžia valdyti, kaip elementas bus animuotas arba perkeliamas į puslapį.

• įvesti-nuo: taikoma elementui prieš jam patenkant į naršyklę. Šią klasę naudojate pradinei elemento CSS būsenai nustatyti.
• įvesti-į: taikoma elementui, kai jis patenka į naršyklę. Šią klasę naudojate galutinei elemento CSS būsenai nustatyti.
• įvesti-aktyvus: taikoma, kai elementas pereina iš vienos būsenos į kitą. Čia jūs nustatote, kiek laiko užtruks perėjimas.

Pažiūrėkime pavyzdį:

<perėjimas>
 <h1> Sveikih1>
perėjimas>
.įvesti-nuo {
neskaidrumas: 0;
}
.enter-to {
neskaidrumas: 1;
}
.enter-active {
perėjimas: neskaidrumas 2slengvumas;
}

Naudojant šį kodą, pirmojo lygio antraštė per dvi sekundes pereina iš nematomos (neskaidrumas: 0) iki visiškai matomo (neskaidrumas: 1). Šis perėjimas įvyksta, kai elementas patenka į DOM. Be perėjimo tekstas būtų iškart pasirodęs naršyklėje, kai puslapis būtų įkeltas.

Pereinamųjų klasių taikymas, kai elementai palieka puslapį

The perėjimas komponentas palaiko tris kitas perėjimo klases, kurias turite taikyti, kai elementas palieka DOM. Jų vardai yra isvyksta is, palikti, ir palikti aktyvų. Šios klasės valdo, kaip elementas bus animuotas arba perkeliamas iš puslapio.

Kaip jau galėjote atspėti, šios klasės yra panašios į įvesti- klases, apie kurias kalbėjome anksčiau. Tačiau šios klasės aktyvuojamos tik tada, kai elementas ruošiasi atsijungti nuo DOM. Montavimas ir išmontavimas yra svarbios DOM sąvokos. Kaip kūrėjas turėtumėte turėti a Pagrindinis DOM supratimas ir kitos susijusios sąvokos.

Pažiūrėkime pavyzdį:

<perėjimas>
 <h1> Sveikih1>
perėjimas>
.isvyksta is {
neskaidrumas: 0;
}
.palikti {
neskaidrumas: 1;
}
.palik-aktyvus {
perėjimas: neskaidrumas 2slengvumas;
}

Tokiu atveju pirmojo lygio antraštė užtrunka dvi sekundes, kol lėtai pereina iš matomos (neskaidrumas: 1) į nematomą (neskaidrumas: 0). Šis perėjimas įvyksta, kai elementas palieka DOM. Be perėjimo tekstas būtų akimirksniu dingęs iš naršyklės.

Perėjimų pavadinimų naudojimas

Taip pat galite pridėti a vardas atributas jūsų perėjimo komponentui. Kai tai padarysite, „Vue“ pridės pavadinimą prie jūsų perėjimo klasių. Tai reiškia, kad puslapyje gali būti keli perėjimai, kurių kiekvienas turi unikalias perėjimo klases ir CSS ypatybes.

Pavyzdžiui, jei nustatote pavadinimą išblukti jūsų perėjimo komponente, visos perėjimo klasės bus priešdėlis išnyks:

<perėjimasvardas ="išblukti">
 <h1> Sveikih1>
perėjimas>
.išblukti-įvesti-nuo {
neskaidrumas: 1;
}
.išnyksta-palieka-nuo {
neskaidrumas: 1;
}
// kitas "įveskite" ir "palikti" klasessuįišbluktikaippriešdėlis

Perėjimų kūrimas naudojant perėjimo komponentą

Norėdami parodyti perėjimą Vue.js, apvyniokite H1 viduje perėjimas komponentas. Po, sukursite mygtuką. Spustelėjus šį mygtuką, kintamasis perjungiamas laidos pavadinimas tarp klaidinga ir tiesa.

Štai kodas:

Toliau apibrėžkite scenarijus skyrius. Šiame skyriuje yra sąranka metodas, kuriuo inicijuojate laidos pavadinimas kintamasis su klaidinga.