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).
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.
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.
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.
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
Pentru a crea o nouă componentă web, declarăm o nouă clasă care extinde HTMLElement.
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.
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.
Î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.
host elementul este elementul gradient în sine. Îl putem stiliza ca și cum ar fi un <div /> element.
Î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.
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ă”.
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.
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.
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
- https://developers.google.com/web/fundamentals/web-components/customelements
- https://www.webcomponents.org/introduction
- https://developer.mozilla.org/en-US/docs/Web/Web_Components
- https://reactjs.org/docs/web-components.html
- https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements
- https://w3c.github.io/webcomponents/spec/custom/#custom-elements
