Alakítsa a Morphing ikonokat a gombra kattintva - CSS-trükkök

Az ötlet az, hogy SVG ikont használjon egy gombban, és cserélje ki az ikont egy másikra, amikor a gombra kattint. Egy gombnyomásra gyakran azt jelzi, hogy valamilyen műveletet hajtottak végre, ezért az ikonok váltása jó felhasználói felület érintés lehet, amely megmutatja a változást a kontextusban, és megerősíti, hogy a művelet megtörtént.

Lehetséges felhasználási eset lehet a letöltés gomb. A gombban lévő ikon eredetileg azt jelezheti, hogy a gomb elindítja a letöltést, de pipára vált, amikor a gombra kattintottak.

Lásd a Pen MorphSVG in Button on Click elemet, Geoff Graham (@geoffgraham) a CodePen-en.

Hozzunk létre egy részletet, amely megvalósítja ezt a mintát, hogy felhasználhassuk más hasonló összefüggésekben is.

Követelmények

Miközben ezt SVG-kódrészletként nyújtjuk be, a GSAP TweenMax-jára fogunk támaszkodni, amely egy kifejezetten az SVG animálására szolgáló JavaScript-könyvtár, és a MorphSVG-re, amely a TweenMax egyik alkotóeleme.

Igen, az SVG valóban támogatja az animációkat, amelyek lehetővé teszik számunkra, hogy ugyanezt megvalósítsuk. Mivel azonban a WebKit és a Blink böngészők jövőbeni verzióiban csökken a SMIL támogatása, és az IE és az Edge támogatásának hiánya miatt a GSAP sokkal vonzóbb alternatívává válik.

Gyújtsuk fel ezeket, és építsünk nekünk egy mintát!

1. lépés: Válassza ki az SVG alakzatokat

Az egyik alakot kicseréljük egy másikra. Az ehhez a részlethez használt alakzatok az IcoMoon-tól származnak, amely rengeteg ingyenes vektoros ikonnal rendelkezik, de saját maga is elkészítheti. Akárhogy is, készítse elő az alakjait, és adjuk hozzá őket egy gombelem belső HTML-jéhez.

  Download 

2. lépés: Stílusolja ki a gombot és az SVG-t

Legközelebb beállíthatjuk a CSS-t. A példánkban szereplő stílusok többsége a demóra jellemző. Itt van a minimum, ami szükséges ahhoz, hogy ez a funkció működjön.

Ne feledje, hogy a kulcsdarab elrejti azt az alakzatot, amelybe alapértelmezés szerint morfondírozunk. Ezt azért tesszük, mert a DOM-ban mindkét alakra szükségünk van ahhoz, hogy a MorphSVG felcserélje az egyiket a másikra, de nem tudjuk egyszerre mindkettőt megjeleníteni. Ez azt jelenti, hogy elrejtjük a második alakzatot, és hagyjuk, hogy a MorphSVG csodáit tegye lehetővé, hogy látható legyen, amikor arra szükség van.

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

3. lépés: Mighty Morphin 'SVG-k!

Itt játszik szerepet a TweenMax és a MorphSVG. A példa teljes kódját az alábbiakban adjuk meg, de ez az általános szkriptet követi:

• Definiáljon néhány változót az induláshoz, hogy hivatkozhassunk rájuk a kódban, anélkül, hogy minden egyes esetben ki kellene írnunk őket:
• icons: a teljes SVG elem
• button: az a gomb (vagy link), amely az alakjainkat tartalmazza
• buttonText: a gombon belüli szöveg
• buttonTL: A MorphSVG parancs a letöltés ikon cseréjére a pipa ikonra
• Hé, JavaScript, kérjük, figyelje a gombra kattintást, és játssza le a MorphSVG animációt előre és hátra alternatív kattintások esetén.
• Ja és hé, JavaScript, cserélje ki a gomb szövegét is, amikor a gombra kattint.
• Köszönöm, 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);

Demó

Az alábbiakban bemutatjuk a lefedett kódot:

Lásd a Pen MorphSVG in Button on Click elemet, Geoff Graham (@geoffgraham) a CodePen-en.

Hivatkozások

• GreenSock MorphSVG: Dokumentáció a plugin használatához.
• Hogyan működik az SVG Shape Morphing: Chris ugyanezt a koncepciót tette közzé a SMIL segítségével, és szép alapot adott ehhez a mintához.
• Boldog / szomorú toll: Chris Gannon bemutatója, amely segített elkészíteni az animációt ehhez a mintához.