Icone Shape Morphing nel pulsante al clic - Trucchi CSS

Anonim

L'idea qui è usare un'icona SVG in un pulsante e scambiare quell'icona con un'altra quando si fa clic sul pulsante. Un clic sul pulsante spesso suggerisce che è stata eseguita un'azione, quindi cambiare le icone può essere un bel tocco dell'interfaccia utente per mostrare il cambiamento nel contesto e confermare che l'azione è avvenuta.

Un possibile caso d'uso potrebbe essere un pulsante di download. L'icona nel pulsante potrebbe inizialmente indicare che il pulsante attiverà un download, ma cambierà in un segno di spunta quando si fa clic sul pulsante.

Vedi Pen MorphSVG in Button on Click di Geoff Graham (@geoffgraham) su CodePen.

Creiamo uno snippet che compia questo modello in modo da poterlo utilizzare in altri contesti simili.

Requisiti

Mentre lo archiviamo come snippet SVG, ci affideremo a TweenMax di GSAP, una libreria JavaScript specifica per l'animazione di SVG e MorphSVG, che è un componente di TweenMax.

Sì, SVG ha effettivamente il supporto nativo per le animazioni che ci consentiranno di realizzare la stessa cosa. Tuttavia, con il supporto SMIL in calo nelle versioni future dei browser WebKit e Blink e la totale mancanza di supporto in IE ed Edge, GSAP diventa un'alternativa molto più interessante.

Accendiamoli e costruiamoci uno schema!

Passaggio 1: scegli le forme SVG

Sostituiremo una forma con un'altra. Le forme utilizzate per questo frammento provengono da IcoMoon, che ha tonnellate di icone vettoriali gratuite, ma puoi anche crearne di tue. Ad ogni modo, prepara le tue forme e aggiungiamole all'HTML all'interno di un elemento pulsante.

  Download

Passaggio 2: modellare il pulsante e l'SVG

Successivamente possiamo impostare il CSS. La maggior parte degli stili nel nostro esempio sono specifici per la demo. Ecco il minimo indispensabile per far funzionare questa funzionalità.

Nota che l'elemento chiave sta nascondendo la forma in cui ci stiamo trasformando per impostazione predefinita. Lo facciamo perché abbiamo bisogno di entrambe le forme nel DOM per MorphSVG per scambiarne una con l'altra, ma non possiamo mostrarle entrambe contemporaneamente. Ciò significa che nascondiamo la seconda forma e lasciamo che MorphSVG faccia le sue meraviglie per renderlo visibile quando è necessario.

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

Passaggio 3: SVG di Mighty Morphin!

È qui che entrano in gioco TweenMax e MorphSVG. Il codice completo per l'esempio è fornito di seguito, ma segue questo script generale:

  • Definisci alcune variabili per iniziare in modo da poterle fare riferimento in tutto il codice senza doverle scrivere ogni volta:
    • icons: l'elemento SVG completo
    • button: il pulsante (o collegamento) che contiene le nostre forme
    • buttonText: il testo all'interno del pulsante
    • buttonTL: Il comando MorphSVG per sostituire l'icona di download con l'icona del segno di spunta
  • Ehi, JavaScript, controlla che il pulsante venga cliccato e riproduci l'animazione MorphSVG in avanti e all'indietro con clic alternati.
  • Oh e, ehi JavaScript, scambia anche il testo del pulsante quando si fa clic sul pulsante.
  • Grazie, 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

Quella che segue è una demo del codice che abbiamo trattato:

Vedi Pen MorphSVG in Button on Click di Geoff Graham (@geoffgraham) su CodePen.

Riferimenti

  • GreenSock MorphSVG: documentazione per l'utilizzo del plugin.
  • Come funziona SVG Shape Morphing: Chris ha pubblicato lo stesso concetto usando SMIL e ha fornito una buona base per questo modello.
  • Happy / Sad Pen: demo di Chris Gannon che ha aiutato a costruire l'animazione per questo pattern.