Tvarujte ikony morfovania v tlačidle po kliknutí Triky CSS

Anonim

Myšlienkou je použitie ikony SVG v tlačidle a výmena tejto ikony za inú po kliknutí na tlačidlo. Kliknutie na tlačidlo často naznačuje, že bola vykonaná akcia, takže prepínanie ikon môže byť príjemným dotykom používateľského rozhrania, aby sa zobrazila zmena v kontexte a potvrdilo sa, že k akcii došlo.

Možným prípadom použitia by mohlo byť tlačidlo na stiahnutie. Ikona v tlačidle môže spočiatku naznačovať, že tlačidlo spustí sťahovanie, ale po kliknutí na tlačidlo sa zmení na začiarknutie.

Pozrite si pero MorphSVG v tlačidle Click on Click od Geoffa Grahama (@geoffgraham) na CodePen.

Vytvorme úryvok, ktorý dosahuje tento vzor, ​​aby sme ho mohli použiť v iných podobných kontextoch.

Požiadavky

Aj keď to nahrávame ako úryvok SVG, budeme sa spoliehať na TweenMax od GSAP, čo je knižnica JavaScriptu špeciálne na animáciu SVG, a MorphSVG, ktorý je súčasťou TweenMaxu.

Áno, SVG skutočne má natívnu podporu pre animácie, ktoré nám umožňujú dosiahnuť to isté. Avšak s klesajúcou podporou SMIL v budúcich verziách prehľadávačov WebKit a Blink a úplným nedostatkom podpory v IE a Edge sa GSAP stáva oveľa atraktívnejšou alternatívou.

Poďme to rozpáliť a vytvorme nám vzor!

Krok 1: Vyberte tvary SVG

Vymeníme jeden tvar za druhý. Tvary použité pre tento úryvok pochádzajú z aplikácie IcoMoon, ktorá má veľa bezplatných vektorových ikon, ale môžete si vytvoriť aj svoje vlastné. Tak či onak, pripravte si tvary a pridajme ich do HTML vo vnútri prvku tlačidla.

  Download

Krok 2: Upravte štýl tlačidla a SVG

Ďalej môžeme nastaviť CSS. Väčšina štýlov v našom príklade je špecifická pre ukážku. Tu je nevyhnutné minimum nevyhnutných na to, aby táto funkčnosť fungovala.

Upozorňujeme, že kľúčová súčasť predvolene skrýva tvar, do ktorého sa morfujeme. Robíme to preto, lebo potrebujeme, aby oba tvary v DOM pre MorphSVG zamieňali jeden za druhý, ale nemôžeme zobraziť oba súčasne. To znamená, že skryjeme druhý tvar a necháme MorphSVG robiť zázraky, aby bol viditeľný, keď to bude potrebné.

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

Krok 3: Mighty Morphin 'SVG!

Tu prichádzajú na rad TweenMax a MorphSVG. Celý kód príkladu je uvedený nižšie, ale riadi sa týmto všeobecným skriptom:

  • Na začiatok definujte niekoľko premenných, aby sme na ne mohli odkazovať v celom kóde bez toho, aby sme ich museli zakaždým vypísať:
    • icons: celý prvok SVG
    • button: tlačidlo (alebo odkaz), ktoré obsahuje naše tvary
    • buttonText: text vo vnútri tlačidla
    • buttonTL: Príkaz MorphSVG na výmenu ikony stiahnutia za ikonu začiarknutia
  • Ahoj, JavaScript, sledujte kliknutie na tlačidlo a pri alternatívnych kliknutiach prehrajte animáciu MorphSVG dopredu a dozadu.
  • Aha, hej, JavaScript, tiež po kliknutí na tlačidlo zameníte text tlačidla.
  • Ďakujem, 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);

Ukážka

Nasleduje ukážka kódu, ktorý sme pokryli:

Pozrite si pero MorphSVG v tlačidle Click on Click od Geoffa Grahama (@geoffgraham) na CodePen.

Referencie

  • GreenSock MorphSVG: Dokumentácia pre použitie doplnku.
  • Ako funguje tvarovanie tvarov SVG: Chris zverejnil tento istý koncept pomocou SMIL a poskytol pekný základ pre tento vzor.
  • Veselé / smutné pero: ukážka Chrisa Gannona, ktorá pomohla vytvoriť animáciu pre tento vzor.