Vorm Morphing-pictogrammen in Button on Click - CSS-trucs

Anonim

Het idee hier is om een ​​SVG-pictogram in een knop te gebruiken en dat pictogram te vervangen door een ander wanneer op de knop wordt geklikt. Een klik op een knop suggereert vaak dat er een actie is ondernomen, dus het wisselen van pictogrammen kan een leuke UI-aanraking zijn om de verandering in de context te tonen en te bevestigen dat de actie heeft plaatsgevonden.

Een mogelijke use case zou een downloadknop kunnen zijn. Het pictogram in de knop kan in eerste instantie aangeven dat de knop een download activeert, maar verandert in een vinkje wanneer op de knop wordt geklikt.

Zie de Pen MorphSVG in Button on Click door Geoff Graham (@geoffgraham) op CodePen.

Laten we een fragment maken dat dit patroon uitvoert, zodat we het in andere vergelijkbare contexten kunnen gebruiken.

Voorwaarden

Terwijl we dit indienen als een SVG-fragment, vertrouwen we op GSAP's TweenMax, een JavaScript-bibliotheek die specifiek is voor het animeren van SVG, en MorphSVG, dat een onderdeel is van TweenMax.

Ja, SVG heeft inderdaad native ondersteuning voor animaties waarmee we hetzelfde zouden kunnen bereiken. Nu SMIL-ondersteuning echter afneemt in toekomstige versies van WebKit- en Blink-browsers en het totale gebrek aan ondersteuning in IE en Edge, wordt GSAP een veel aantrekkelijker alternatief.

Laten we die opsteken en een patroon voor ons bouwen!

Stap 1: Kies de SVG-vormen

We gaan de ene vorm inruilen voor een andere. De vormen die voor dit fragment zijn gebruikt, zijn afkomstig van IcoMoon, dat heel veel gratis vectorpictogrammen heeft, maar u kunt ook uw eigen vormen maken. Hoe dan ook, bereid je vormen voor en laten we ze toevoegen aan de HTML in een knopelement.

  Download

Stap 2: Stijl de knop en SVG

We kunnen de CSS vervolgens instellen. De meeste stijlen in ons voorbeeld zijn specifiek voor de demo. Hier is het absolute minimum van wat nodig is om deze functionaliteit te laten werken.

Merk op dat het belangrijkste stuk de vorm verbergt waarin we standaard veranderen. We doen dit omdat we beide vormen in de DOM nodig hebben zodat MorphSVG de ene voor de andere kan ruilen, maar we kunnen niet beide tegelijk weergeven. Dat betekent dat we de tweede vorm verbergen en MorphSVG zijn wonderen laten doen om hem zichtbaar te maken wanneer dat nodig is.

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

Stap 3: Mighty Morphin 'SVG's!

Dit is waar TweenMax en MorphSVG in het spel komen. De volledige code voor het voorbeeld wordt hieronder gegeven, maar het volgt dit algemene script:

  • Definieer een paar variabelen om te beginnen, zodat we er in de hele code naar kunnen verwijzen zonder ze elke keer uit te hoeven schrijven:
    • icons: het volledige SVG-element
    • button: de knop (of link) die onze vormen bevat
    • buttonText: de tekst in de knop
    • buttonTL: De MorphSVG-opdracht om het downloadpictogram te wisselen voor het vinkje
  • Hé, JavaScript, let op de knop waarop wordt geklikt en speel de MorphSVG-animatie vooruit en achteruit met afwisselende klikken.
  • Oh en, hey JavaScript, wissel ook de knoptekst wanneer er op de knop wordt geklikt.
  • Bedankt, 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

Het volgende is een demo van de code die we hebben behandeld:

Zie de Pen MorphSVG in Button on Click door Geoff Graham (@geoffgraham) op CodePen.

Referenties

  • GreenSock MorphSVG: documentatie voor het gebruik van de plug-in.
  • Hoe SVG Shape Morphing werkt: Chris publiceerde hetzelfde concept met SMIL en zorgde voor een mooie basis voor dit patroon.
  • Happy / Sad Pen: de demo van Chris Gannon die hielp bij het maken van de animatie voor dit patroon.