Formați pictogramele Morphing în buton pe clic - CSS-Tricks

Anonim

Ideea aici este să folosiți o pictogramă SVG într-un buton și să schimbați pictograma respectivă pentru o altă dată când se face clic pe buton. Un clic pe buton sugerează adesea că a fost întreprinsă o acțiune, astfel încât comutarea pictogramelor poate fi o simplă atingere a UI pentru a arăta schimbarea în context și a confirma că acțiunea a avut loc.

Un posibil caz de utilizare ar putea fi un buton de descărcare. Pictograma din buton poate indica inițial că butonul va declanșa o descărcare, dar va trece la o bifă atunci când butonul a fost făcut clic.

Vedeți Pen MorphSVG în Buton pe clic de Geoff Graham (@geoffgraham) pe CodePen.

Să creăm un fragment care să realizeze acest model, astfel încât să-l putem folosi în alte contexte similare.

Cerințe

În timp ce depunem acest lucru ca un fragment SVG, ne vom baza pe TweenMax de la GSAP, care este o bibliotecă JavaScript specială pentru animarea SVG și pe MorphSVG, care este o componentă a TweenMax.

Da, SVG are într-adevăr suport nativ pentru animații care ne permit să realizăm același lucru. Cu toate acestea, cu suportul SMIL în scădere în versiunile viitoare ale browserelor WebKit și Blink și lipsa totală de suport în IE și Edge, GSAP devine o alternativă mult mai atractivă.

Să-i tragem pe aceștia și să ne construim un model!

Pasul 1: alegeți formele SVG

Vom schimba o formă pe alta. Formele folosite pentru acest fragment au provenit de la IcoMoon, care are o mulțime de icoane vectoriale gratuite, dar ai putea să le creezi și tu. În orice caz, pregătiți-vă formele și să le adăugăm la HTML din interiorul unui element de buton.

  Download

Pasul 2: Stilați butonul și SVG

Putem configura CSS în continuare. Majoritatea stilurilor din exemplul nostru sunt specifice demo-ului. Iată minimul necesar pentru ca această funcționalitate să funcționeze.

Rețineți că piesa cheie ascunde forma în care ne transformăm în mod implicit. Facem acest lucru pentru că avem nevoie de ambele forme în DOM pentru ca MorphSVG să le schimbe una pe cealaltă, dar nu le putem afișa pe amândouă în același timp. Asta înseamnă că ascundem a doua formă și lăsăm MorphSVG să-și facă minunile pentru a o face vizibilă atunci când este nevoie.

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

Pasul 3: SVG-urile lui Mighty Morphin!

Aici intră în joc TweenMax și MorphSVG. Codul complet pentru exemplu este furnizat mai jos, dar urmează acest script general:

  • Definiți câteva variabile pentru a începe, astfel încât să ne putem referi la ele în tot codul, fără a fi nevoie să le scriem de fiecare dată:
    • icons: elementul SVG complet
    • button: butonul (sau linkul) care conține formele noastre
    • buttonText: textul din interiorul butonului
    • buttonTL: Comanda MorphSVG pentru a schimba pictograma de descărcare cu pictograma bifă
  • Bună, JavaScript, vă rugăm să urmăriți pentru a face clic pe buton și să redați animația MorphSVG înainte și înapoi pe clicuri alternative.
  • Ah și, hei JavaScript, schimbați și textul butonului când faceți clic pe buton.
  • Mulțumesc, 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

Următoarea este o demonstrație a codului pe care l-am acoperit:

Vedeți Pen MorphSVG în Buton pe clic de Geoff Graham (@geoffgraham) pe CodePen.

Referințe

  • GreenSock MorphSVG: Documentație pentru utilizarea pluginului.
  • Cum funcționează SVG Shape Morphing: Chris a publicat același concept folosind SMIL și a oferit o bază frumoasă pentru acest model.
  • Happy / Sad Pen: demo-ul lui Chris Gannon care a ajutat la construirea animației pentru acest model.