Kujundage ikoonide klõpsamise nupul nuppu - CSS-trikid

Anonim

Selle idee on kasutada nupus SVG ikooni ja vahetada see ikoon teise vastu, kui nupul klõpsatakse. Nupul klõpsamine viitab sageli toimingu tegemisele, nii et ikoonide vahetamine võib olla mõnus kasutajaliidese puudutus, et näidata muutust kontekstis ja kinnitada, et toiming on toimunud.

Võimalik kasutusjuht võib olla allalaadimisnupp. Nupu ikoon võib esialgu näidata, et nupp käivitab allalaadimise, kuid kui nupul klõpsatakse, muutub see märkeks.

Vaadake Pen MorphSVG-i nuppu Click on Click by Geoff Graham (@geoffgraham) CodePenis.

Koostame selle mustri saavutanud katkendi, et saaksime seda kasutada ka muudes sarnastes kontekstides.

Nõuded

Kuigi me esitame selle SVG-i fragmentidena, loodame GSAP-i TweenMaxile, mis on JavaScripti teek spetsiaalselt SVG animeerimiseks, ja MorphSVG-le, mis on TweenMaxi komponent.

Jah, SVG-l on tõepoolest kohalik tugi animatsioonidele, mis võimaldavad meil sama asja saavutada. Kuid SMIL-i toetuse vähenemisel WebKiti ja Blinki brauserite tulevastes versioonides ning IE ja Edge täieliku toe puudumise tõttu muutub GSAP palju atraktiivsemaks alternatiiviks.

Laseme need üles ja ehitame meile mustri!

1. samm: valige SVG-vormid

Me vahetame ühe kuju teise vastu välja. Selle jupi jaoks kasutatud kujundid pärinesid IcoMoonilt, millel on palju tasuta vektorikooni, kuid võite ka ise teha. Mõlemal juhul valmistage oma kujundid ette ja lisame need nupuelemendi HTML-i.

  Download

2. samm: kujundage nupp ja SVG

Järgmisena saame seadistada CSS-i. Enamik meie näite stiile on demole omased. Siin on selle funktsionaalsuse toimimiseks vajalik miinimum.

Pange tähele, et võtmeosa peidab kuju, milles me vaikimisi morfiseerime. Teeme seda, kuna meil on vaja DOM-is mõlemat kuju, et MorphSVG saaks ühe teise vastu vahetada, kuid me ei saa mõlemat korraga kuvada. See tähendab, et peidame teise kuju ja laseme MorphSVG-l imesid teha, et see vajadusel nähtavaks teha.

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

3. samm: Mighty Morphin 'SVG-d!

Siin tulevad mängu TweenMax ja MorphSVG. Näite täielik kood on toodud allpool, kuid see järgib seda üldist skripti:

  • Alustamiseks määratlege mõned muutujad, et saaksime neile kogu koodis viidata, ilma et peaksime neid iga kord välja kirjutama:
    • icons: täielik SVG-element
    • button: nupp (või link), mis sisaldab meie kujundeid
    • buttonText: tekst nupu sees
    • buttonTL: MorphSVG käsk allalaadimisikooni vahetamiseks linnukese ikooni vastu
  • Hei, JavaScripti, palun jälgige nupu klõpsamist ja esitage vahelduvate klõpsude korral MorphSVG animatsioon edasi ja tagasi.
  • Oh ja, hei JavaScripti, vahetage nupu klõpsamisel ka nupu tekst.
  • Aitäh, 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

Järgmine on meie käsitletud koodi demo:

Vaadake Pen MorphSVG-i nuppu Click on Click by Geoff Graham (@geoffgraham) CodePenis.

Viited

  • GreenSock MorphSVG: pistikprogrammi kasutamise dokumentatsioon.
  • Kuidas SVG Shape Morphing töötab: Chris avaldas sama kontseptsiooni SMIL-i abil ja andis sellele mustrile kena aluse.
  • Õnnelik / kurb sulepea: Chris Gannoni demo, mis aitas selle mustri jaoks animatsiooni üles ehitada.