Oblikujte ikone Morphinga u gumbu na klik - CSS-trikovi

Anonim

Ideja je ovdje koristiti ikonu SVG u gumbu i zamijeniti je za drugu kad se klikne na gumb. Klik na gumb često sugerira da je poduzeta radnja, pa prebacivanje ikona može biti lijep dodir korisničkog sučelja kako bi se prikazala promjena u kontekstu i potvrdilo da se radnja dogodila.

Mogući slučaj upotrebe mogao bi biti gumb za preuzimanje. Ikona na gumbu u početku može označavati da će gumb pokrenuti preuzimanje, ali će se nakon klika na gumb promijeniti u kvačicu.

Pogledajte Pen MorphSVG u gumbu Gumb na klik Geoff Graham (@geoffgraham) na CodePenu.

Stvorimo isječak koji ostvaruje ovaj obrazac kako bismo ga mogli koristiti u drugim sličnim kontekstima.

Zahtjevi

Dok ovo podnosimo kao SVG isječak, oslanjat ćemo se na GSAP-ov TweenMax, koji je JavaScript biblioteka posebno za animiranje SVG-a, i MorphSVG, koji je komponenta TweenMax-a.

Da, SVG doista ima izvornu podršku za animacije koje nam omogućuju da postignemo isto. Međutim, s SMIL podrškom koja se smanjuje u budućim verzijama preglednika WebKit i Blink i potpuni nedostatak podrške u IE i Edge, GSAP postaje puno privlačnija alternativa.

Otpustimo one i napravimo nam obrazac!

Korak 1: Odaberite SVG oblike

Zamijenit ćemo jedan oblik za drugi. Oblici koji se koriste za ovaj isječak došli su iz IcoMoon-a, koji ima na tone besplatnih vektorskih ikona, ali mogli biste i sami napraviti svoje. U svakom slučaju, pripremite svoje oblike i dodajte ih u HTML unutar elementa gumba.

  Download

Korak 2: Oblikujte gumb i SVG

Možemo sljedeći postaviti CSS. Većina stilova u našem primjeru specifični su za demonstraciju. Evo najmanjeg potrebnog za rad ove funkcije.

Imajte na umu da ključni dio skriva oblik u koji se pretvaramo prema zadanim postavkama. To radimo jer nam trebaju oba oblika u DOM-u da bi MorphSVG zamijenio jedan za drugi, ali ne možemo istovremeno prikazati oba. To znači da skrivamo drugi oblik i dopuštamo MorphSVG-u da čini svoja čuda kako bi bio vidljiv kad zatreba.

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

Korak 3: Moćni Morphin 'SVG-ovi!

Tu nastupaju TweenMax i MorphSVG. Cjelovit kôd za primjer nalazi se u nastavku, ali slijedi ovu opću skriptu:

  • Definirajte nekoliko varijabli za početak kako bismo se mogli pozivati ​​na njih u cijelom kodu bez da ih moramo svaki put ispisivati:
    • icons: puni SVG element
    • button: gumb (ili veza) koji sadrži naše oblike
    • buttonText: tekst unutar gumba
    • buttonTL: Naredba MorphSVG da zamijenite ikonu za preuzimanje za ikonu kvačice
  • Hej, JavaScript, pripazite da se klikne gumb i reproducirajte MorphSVG animaciju prema naprijed i unatrag na alternativnim klikovima.
  • Oh, hej, JavaScript, također zamijenite tekst gumba kad se klikne na 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

Slijedi demo koda koji smo obradili:

Pogledajte Pen MorphSVG u gumbu Gumb na klik Geoff Graham (@geoffgraham) na CodePenu.

Reference

  • GreenSock MorphSVG: Dokumentacija za upotrebu dodatka.
  • Kako djeluje SVG oblikovanje oblika: Chris je objavio isti koncept koristeći SMIL i pružio lijepu osnovu za ovaj obrazac.
  • Sretna / tužna olovka: demonstracija Chrisa Gannona koja je pomogla u izradi animacije za ovaj obrazac.