Form Morphing-ikoner i knap ved klik - CSS-tricks

Anonim

Ideen her er at bruge et SVG-ikon i en knap og bytte ikonet ud med et andet, når der klikkes på knappen. Et knap-klik antyder ofte, at der er udført en handling, så skift af ikoner kan være en god brugergrænseflade for at vise ændringen i kontekst og bekræfte, at handlingen er sket.

En mulig brugstilstand kan være en downloadknap. Ikonet i knappen indikerer måske oprindeligt, at knappen udløser en download, men skifter til et flueben, når der er klikket på knappen.

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

Lad os oprette et uddrag, der udfører dette mønster, så vi kan bruge det i andre lignende sammenhænge.

Krav

Mens vi arkiverer dette som et SVG-uddrag, vil vi stole på GSAPs TweenMax, som er et JavaScript-bibliotek specifikt til animering af SVG og MorphSVG, som er en komponent i TweenMax.

Ja, SVG har faktisk indfødt support til animationer, der giver os mulighed for at opnå det samme. Men med SMIL-support, der aftager i fremtidige versioner af WebKit og Blink-browsere, og det er total mangel på support i IE og Edge, bliver GSAP et meget mere attraktivt alternativ.

Lad os fyre dem op og bygge os et mønster!

Trin 1: Vælg SVG-figurer

Vi bytter en figur ud til en anden. Formerne, der blev brugt til dette uddrag, kom fra IcoMoon, som har masser af gratis vektorikoner, men du kan også lave din egen. Uanset hvad skal du forberede dine figurer, og lad os tilføje dem til HTML inde i et knapelement.

  Download

Trin 2: Stil knappen og SVG

Vi kan konfigurere CSS næste. De fleste stilarter i vores eksempel er specifikke for demoen. Her er det absolutte minimum af, hvad der er nødvendigt for at få denne funktionalitet til at fungere.

Bemærk, at nøgleelementet skjuler den form, vi forvandler os til som standard. Vi gør dette, fordi vi har brug for begge former i DOM til MorphSVG for at bytte den ene mod den anden, men vi kan ikke vise begge på samme tid. Det betyder, at vi skjuler den anden form og lader MorphSVG gøre sine vidundere for at gøre den synlig, når den har brug for det.

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

Trin 3: Mighty Morphin 'SVG'er!

Det er her TweenMax og MorphSVG spiller ind. Den fulde kode for eksemplet er angivet nedenfor, men den følger dette generelle script:

  • Definer et par variabler, der skal startes, så vi kan henvise til dem i hele koden uden at skulle skrive dem ud hver gang:
    • icons: det fulde SVG-element
    • button: knappen (eller linket), der indeholder vores figurer
    • buttonText: teksten inde i knappen
    • buttonTL: MorphSVG-kommandoen til at bytte downloadikonet til fluebenikonet
  • Hej, JavaScript, se efter knappen klikkes og afspil MorphSVG-animationen fremad og baglæns ved alternative klik.
  • Åh, hej JavaScript, skift også knapteksten, når der klikkes på knappen.
  • Tak, 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 af den kode, vi har dækket:

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

Referencer

  • GreenSock MorphSVG: Dokumentation for brug af pluginet.
  • Sådan fungerer SVG Shape Morphing: Chris offentliggjorde det samme koncept ved hjælp af SMIL og gav et godt fundament for dette mønster.
  • Glad / trist pen: Chris Gannons demo, som var med til at konstruere animationen til dette mønster.