de Anthony Ng

Cum se utilizează componente web pentru a crea tranziții de gradient

În acest articol, vom afla despre componentele web. Vom construi o componentă web simplă care să-i tranziționeze culoarea de gradient.

Componentele web sunt o suită de tehnologii diferite care vă permit să creați elemente personalizate reutilizabile. Utilizarea unui element personalizat nu este diferită de utilizarea unui <div />. Puteți crea instanțe în HTML. Puteți crea o instanță cu JavaScript. Puteți atașa ascultători de evenimente la elemente personalizate.

V-ați uitat vreodată la specificațiile HTML și ați crezut că autorii au omis un element important? Aceasta este soluția pentru dvs. Elementele personalizate oferă o modalitate dezvoltatorilor de a-și construi propriile elemente DOM complet dotate.

Diferența dintre elementele personalizate și componentele web?

Mulți folosesc termenii Elemente personalizate și Componente web în mod interschimbabil. Componentele web sunt o suită de tehnologii diferite, care includ elemente personalizate, Shadow DOM și importuri HTML. Custom Elements are propriile sale specificații (Vezi aici).

Cum se utilizeaza componente web pentru a crea tranzitii de
Componentele web sunt o suită de tehnologii; Elemente personalizate, Shadow DOM și importuri HTML.

Componentele web sunt o caracteristică nativă a browserului. Nu aveți nevoie de biblioteci externe pentru a utiliza această funcționalitate. Puteți vedea tabelul de asistență pentru browser aici, numit Suport pentru browser.

Cum se utilizeaza componente web pentru a crea tranzitii de
Suport pentru browser pentru componente Web. https://www.webcomponents.org/

Aici puteți vedea asistența pentru Elemente personalizate.
Puteți vedea asistența pentru șabloane aici.
Puteți vedea asistența pentru Shadow DOM aici.

Deci acesta este React?

Componentele React și Web rezolvă diferite probleme. Componentele web oferă o încapsulare puternică pentru componentele reutilizabile. React oferă o bibliotecă declarativă care menține DOM sincronizat cu datele dvs.
React nu face nicio diferențiere între un element HTML nativ și o componentă web. S-ar descurca cu componenta Web personalizată, așa cum ar fi un element HTML normal.

Vedeți acest exemplu de aplicație React utilizând o componentă Web.

Documentația React arată, de asemenea, modul în care puteți utiliza React în componentele dvs. web. Nu am găsit un scenariu care să justifice importarea React.

Să trecem fundaluri de gradient

Vom construi o componentă Web de gradient ca cea de mai jos.

Cum se utilizeaza componente web pentru a crea tranzitii de
Tranziții de gradient

Observați cum trece între fundalele de gradient. Nu putem trece în mod prestabilit fundaluri. A se vedea Codepen aici.

Dar putem opacitatea tranziției. A se vedea Codepen aici.

Putem profita de acest lucru cu pseudo-clase CSS pentru a obține efectul dorit. A se vedea Codepen aici.

Putem profita de acest lucru cu pseudo-clasa CSS „înainte” pentru a obține efectul dorit. A se vedea Codepen aici.

1611473527 209 Cum se utilizeaza componente web pentru a crea tranzitii de
Elementul div are opacitate 1; pseudo-clasa dinaintea elementului are opacitate 0

Există un strat (<div />) cu o culoare de gradient. Există un al doilea layer (div::înainte) cu o culoare de gradient diferită. Acest al doilea strat se află deasupra primului strat and has opacity: 0. Pentru a începe tranziția gradientului, trecem opacitatea celui de-al doilea strat de la 0 la 1. Acest lucru ne dă efectul că gradientul este în tranziție.

Ca dezvoltator, sunt o mulțime de lucruri despre care trebuie să știi. Nu ar fi frumos să ai un mod simplu și declarativ de a folosi acest gradient? Imaginați-vă un element HTML numit <my-gradient-background />. Accepts a gratribut adient care ia o culoare degradată, cum ar fi „roșu, alb, albastru”. Când schimbăme the gradient, culoarea degrade va trece așa cum dorim. Asta vom crea.

Construirea componentei web

1611473528 756 Cum se utilizeaza componente web pentru a crea tranzitii de

Pentru a crea o nouă componentă web, declarăm o nouă clasă care extinde HTMLElement.

1611473528 616 Cum se utilizeaza componente web pentru a crea tranzitii de

Dacă doriți să extindeți funcționalitatea unui element HTML existent, îl puteți extinde în schimb. De exemplu, pentru a extinde funcționalitatea unui <p />, ai extend HTMLParagraphElement.

1611473528 646 Cum se utilizeaza componente web pentru a crea tranzitii de

Atașăm o rădăcină umbră la componenta noastră web. API-ul shadow DOM ne permite să atașăm DOM la elementul nostru de gradient. Acest DOM umbrel este încapsulat în componenta noastră și este (în general) ascuns de restul DOM. Puteți citi mai multe despre Shadow DOM aici.

1611473529 471 Cum se utilizeaza componente web pentru a crea tranzitii de

În DOM-ul nostru din umbră, adăugăm un stil pentru elementul de gradient. Folosim un <div class=”after” /> în loc de pseudo-element aici. Acest lucru se datorează faptului că dorim să referim acest strat cu JavaScript. Nu putem face referire la pseudo-elemente cu JavaScript.

1611473529 990 Cum se utilizeaza componente web pentru a crea tranzitii de

host elementul este elementul gradient în sine. Îl putem stiliza ca și cum ar fi un <div /> element.

1611473530 452 Cum se utilizeaza componente web pentru a crea tranzitii de

În atributele observate, returnăm o listă de atribute HTML pe care dorim să le urmărim. Când aceste atribute urmărite se schimbă, se va declanșa funcția noastră de apel invers.

1611473530 60 Cum se utilizeaza componente web pentru a crea tranzitii de

Al nostru attributeChangedCallback funcția se declanșează ori de câte ori se schimbă un atribut observat. Obținem 3 argumente în funcția noastră de apel invers. Primul argument este name a atributului care s-a schimbat. Al doilea argument este valoarea atributului înainte ca acesta să se schimbe. Al treilea argument este valoarea atributului după ce s-a schimbat.

În funcția noastră de apel invers, ne actualizăm elementul „după”.

1611473531 133 Cum se utilizeaza componente web pentru a crea tranzitii de
1611473531 245 Cum se utilizeaza componente web pentru a crea tranzitii de

Actualizăm culoarea de fundal a elementului „după” cu noua culoare de gradient. De asemenea, îi setăm opacitatea la 1. Elementul nostru „după” va începe să se estompeze, creându-ne efectul dorit. Vrem să facem un cod de curățare când elementul „după” a terminat de estompare.

1611473532 420 Cum se utilizeaza componente web pentru a crea tranzitii de
1611473532 42 Cum se utilizeaza componente web pentru a crea tranzitii de

Elementul nostru „după” face toată treaba creării efectului de tranziție gradient. Ne-am setat elementul „gazdă” la noua culoare de gradient. Ascundem elementul „după”, astfel încât să fie gata pentru următoarea estompare. Asta este toată curățarea de care avem nevoie.

1611473532 321 Cum se utilizeaza componente web pentru a crea tranzitii de

Pentru a utiliza această nouă componentă web, trebuie să o definim astfel.

Acum, veți putea folosi <my-gradient-background /> ca un element HTML normal.

Puteți vizualiza codul complet aici. Simțiți-vă liber să îl descărcați cu npm install — save my-gradient-background.

Referințe