Form Morphing-ikoner i knapp ved klikk - CSS-triks

Anonim

Ideen her er å bruke et SVG-ikon i en knapp og bytte ikonet ut mot en annen når du klikker på knappen. Et knappeklikk antyder ofte at det er utført en handling, så bytte av ikoner kan være et fint brukergrensesnitt for å vise endringen i konteksten og bekrefte at handlingen har skjedd.

En mulig brukstilfelle kan være en nedlastningsknapp. Ikonet i knappen kan i utgangspunktet indikere at knappen vil utløse en nedlasting, men endre til et hake når du har klikket på knappen.

Se Pen MorphSVG i Button on Click av Geoff Graham (@geoffgraham) på CodePen.

La oss lage et utdrag som oppnår dette mønsteret, slik at vi kan bruke det i andre lignende sammenhenger.

Krav

Mens vi arkiverer dette som en SVG-kodebit, kommer vi til å stole på GSAPs TweenMax, som er et JavaScript-bibliotek spesielt for å animere SVG, og MorphSVG, som er en komponent av TweenMax.

Ja, SVG har faktisk innfødt støtte for animasjoner som gjør at vi kan oppnå det samme. Imidlertid, med SMIL-støtte som avtar i fremtidige versjoner av WebKit og Blink-nettlesere, og det er total mangel på støtte i IE og Edge, blir GSAP et mye mer attraktivt alternativ.

La oss skyte dem opp og bygge oss et mønster!

Trinn 1: Velg SVG-figurer

Vi skal bytte ut en form for en annen. Formene som ble brukt til dette utdraget kom fra IcoMoon, som har mange gratis vektorikoner, men du kan også lage dine egne. Uansett, forbered figurene dine, og la oss legge dem til HTML-en inne i et knappelement.

  Download

Trinn 2: Stil knappen og SVG

Vi kan sette opp CSS neste. De fleste stilene i eksemplet vårt er spesifikke for demoen. Her er det absolutte minimum av hva som er nødvendig for at denne funksjonaliteten skal fungere.

Merk at nøkkelstykket skjuler formen vi forvandler oss til som standard. Vi gjør dette fordi vi trenger begge former i DOM for MorphSVG for å bytte den ene mot den andre, men vi kan ikke vise begge samtidig. Det betyr at vi skjuler den andre formen og lar MorphSVG gjøre sine underverk for å gjøre den synlig når den trenger det.

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

Trinn 3: Mighty Morphin 'SVGs!

Det er her TweenMax og MorphSVG spiller inn. Den fulle koden for eksemplet er gitt nedenfor, men den følger dette generelle skriptet:

  • Definer noen variabler som skal startes, slik at vi kan referere til dem gjennom hele koden uten å måtte skrive dem ut hver gang:
    • icons: hele SVG-elementet
    • button: knappen (eller lenken) som inneholder figurene våre
    • buttonText: teksten inne i knappen
    • buttonTL: MorphSVG-kommandoen for å bytte nedlastingsikonet for hakeikonet
  • Hei, JavaScript, vær så snill å se på knappen som skal klikkes og spill MorphSVG-animasjonen fremover og bakover på alternative klikk.
  • Å og, hei JavaScript, bytt også knappeteksten når du klikker på knappen.
  • Takk, 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

Følgende er en demo av koden vi har dekket:

Se Pen MorphSVG i Button on Click av Geoff Graham (@geoffgraham) på CodePen.

Referanser

  • GreenSock MorphSVG: Dokumentasjon for bruk av plugin.
  • Slik fungerer SVG Shape Morphing: Chris publiserte det samme konseptet ved hjelp av SMIL og ga et fint grunnlag for dette mønsteret.
  • Happy / Sad Pen: Chris Gannons demo som var med på å konstruere animasjonen for dette mønsteret.