Oblikujte ikone za preoblikovanje v gumbu na klik - CSS-triki

Anonim

Ideja je uporabiti ikono SVG v gumbu in jo ob kliku gumba zamenjati z drugo. Klik na gumb pogosto pomeni, da je bilo izvedeno dejanje, zato je lahko preklapljanje ikon dober dotik uporabniškega vmesnika, ki prikaže spremembo v kontekstu in potrdi, da se je dejanje zgodilo.

Možen primer uporabe je lahko gumb za prenos. Ikona na gumbu lahko sprva pomeni, da bo gumb sprožil prenos, vendar se ob kliku na gumb spremeni v kljukico.

Oglejte si Pen MorphSVG v Button on Click avtorja Geoff Graham (@geoffgraham) na CodePen.

Ustvarimo odrezek, ki izpolni ta vzorec, da ga bomo lahko uporabili v drugih podobnih kontekstih.

Zahteve

Medtem ko to vlagamo kot delček SVG, se bomo zanašali na GSAP-ov TweenMax, ki je knjižnica JavaScript posebej za animiranje SVG, in MorphSVG, ki je sestavni del TweenMax.

Da, SVG ima resnično izvorno podporo za animacije, ki nam omogočajo, da dosežemo isto. Ker pa podpora SMIL v prihodnjih različicah brskalnikov WebKit in Blink upada in je popolno pomanjkanje podpore v IE in Edge, GSAP postane veliko bolj privlačna alternativa.

Odpustimo jih in si sestavimo vzorec!

1. korak: Izberite oblike SVG

Eno obliko bomo zamenjali za drugo. Oblike, ki so bile uporabljene za ta delček, so prišle iz IcoMoon, ki vsebuje na tone brezplačnih vektorskih ikon, lahko pa jih izdelate tudi sami. Kakorkoli, pripravite svoje oblike in jih dodajte v HTML v elementu gumba.

  Download

2. korak: oblikujte gumb in SVG

Naslednji lahko nastavimo CSS. Večina stilov v našem primeru je značilnih za predstavitev. Tukaj je najmanjši možni del, ki je potreben za delovanje te funkcije.

Upoštevajte, da ključni del privzeto skriva obliko, v katero se preoblikujemo. To naredimo, ker potrebujemo obe obliki v DOM-u, da MorphSVG zamenja eno za drugo, vendar obeh ne moremo prikazati hkrati. To pomeni, da skrijemo drugo obliko in pustimo, da MorphSVG dela svoja čuda, da bo vidna, ko bo treba.

/* The main SVG */ .button-icons ( width: 1.25em; ) /* The individual icons */ .icon ( fill: #fff; ) /* We hide the checkmark by default */ #checkmark ( visibility: hidden; )

3. korak: Mogočni Morphin 'SVG-ji!

Tu nastopata TweenMax in MorphSVG. Celotna koda za primer je navedena spodaj, vendar sledi temu splošnemu skriptu:

  • Za začetek določite nekaj spremenljivk, da se bomo nanje sklicevali v celotni kodi, ne da bi jih morali vsakič zapisati:
    • icons: celoten element SVG
    • button: gumb (ali povezava), ki vsebuje naše oblike
    • buttonText: besedilo znotraj gumba
    • buttonTL: Ukaz MorphSVG, da ikono za prenos zamenjate za ikono kljukice
  • Hej, JavaScript, pazi, če klikneš gumb, in pri nadomestnih kliki predvajaj animacijo MorphSVG naprej in nazaj.
  • Oh in, hej, JavaScript, tudi besedilo gumba zamenjajte, ko kliknete gumb.
  • Hvala, JavaScript
// We're going to select some things and make them variables var select = function(s) ( return document.querySelector(s); ), icons = select('#icons'), button = select('.button'), buttonText = document.getElementById("button-text") // Morph the Download icon into the Checkmark icon var buttonTl = new TimelineMax((paused:true)); buttonTl.to('#download', 1, ( morphSVG:(shape:'#checkmark'), ease:Elastic.easeInOut )) // On button click, play the animation button.addEventListener('click', function() ( if (buttonTl.time() > 0) ( buttonTl.reverse(); ) else ( buttonTl.play(0); ) )) // On button click, swap out the button text button.addEventListener('click', function() ( if (button.classList.contains("saved")) ( button.classList.remove("saved"); buttonText.innerHTML = "Download"; ) else ( button.classList.add("saved"); buttonText.innerHTML = "Saved!"; ) ), false);

Demo

Sledi predstavitev kode, ki smo jo obravnavali:

Oglejte si Pen MorphSVG v Button on Click avtorja Geoff Graham (@geoffgraham) na CodePen.

Reference

  • GreenSock MorphSVG: Dokumentacija za uporabo vtičnika.
  • Kako deluje SVG Shape Morphing: Chris je isti koncept objavil z uporabo SMIL in zagotovil lepo podlago za ta vzorec.
  • Veselo / žalostno pero: predstavitev Chrisa Gannona, ki je pomagal zgraditi animacijo za ta vzorec.