Form Morphing-ikoner i knapp vid klick - CSS-tricks

Anonim

Tanken här är att använda en SVG-ikon i en knapp och byta ut den mot en annan när man klickar på knappen. Ett knappklick föreslår ofta att en åtgärd har vidtagits, så att byta ikoner kan vara en trevlig gränssnitt för att visa förändringen i sammanhanget och bekräfta att åtgärden har hänt.

Ett möjligt användningsfall kan vara en nedladdningsknapp. Ikonen i knappen kan initialt indikera att knappen kommer att utlösa en nedladdning men ändras till en bock när knappen har klickats.

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

Låt oss skapa ett utdrag som åstadkommer detta mönster så att vi kan använda det i andra liknande sammanhang.

Krav

Medan vi arkiverar detta som ett SVG-utdrag kommer vi att förlita oss på GSAP: s TweenMax, som är ett JavaScript-bibliotek speciellt för att animera SVG och MorphSVG, som är en del av TweenMax.

Ja, SVG har verkligen inbyggt stöd för animationer som gör att vi kan åstadkomma samma sak. Men med SMIL-support som avtar i framtida versioner av WebKit och Blink-webbläsare och det är total brist på stöd i IE och Edge blir GSAP ett mycket mer attraktivt alternativ.

Låt oss skjuta upp dem och bygg oss ett mönster!

Steg 1: Välj SVG-former

Vi ska byta ut en form mot en annan. Formerna som användes för detta utdrag kom från IcoMoon, som har massor av gratisvektorikoner, men du kan också göra din egen. Hur som helst, förbered dina former och låt oss lägga till dem i HTML-koden inuti ett knappelement.

  Download

Steg 2: Style knappen och SVG

Vi kan ställa in CSS nästa. De flesta stilar i vårt exempel är specifika för demo. Här är det minsta av vad som är nödvändigt för att denna funktion ska fungera.

Observera att nyckelstycket döljer formen som vi förvandlas till som standard. Vi gör detta för att vi behöver båda formerna i DOM för att MorphSVG ska byta mot varandra, men vi kan inte visa båda samtidigt. Det betyder att vi döljer den andra formen och låter MorphSVG göra sina under för att göra den synlig när den behöver.

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

Steg 3: Mighty Morphin 'SVGs!

Det är här TweenMax och MorphSVG spelar in. Den fullständiga koden för exemplet ges nedan, men den följer detta allmänna skript:

  • Definiera några variabler som ska startas så att vi kan referera till dem genom hela koden utan att behöva skriva ut dem varje gång:
    • icons: hela SVG-elementet
    • button: knappen (eller länken) som innehåller våra former
    • buttonText: texten inuti knappen
    • buttonTL: MorphSVG-kommandot för att byta nedladdningsikonen för bockikonen
  • Hej JavaScript, se till att knappen klickas och spela MorphSVG-animationen framåt och bakåt på alternativa klick.
  • Åh, hej JavaScript, byt också ut knapptexten när du klickar på knappen.
  • Tack, 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öljande är en demo av koden vi har täckt:

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

Referenser

  • GreenSock MorphSVG: Dokumentation för användning av plugin.
  • Så fungerar SVG Shape Morphing: Chris publicerade samma koncept med SMIL och gav en bra grund för detta mönster.
  • Happy / Sad Pen: Chris Gannons demo som hjälpte till att konstruera animationen för detta mönster.