Form-Morphing-Symbole in der Schaltfläche auf Klicken - CSS-Tricks

Anonim

Die Idee hier ist, ein SVG-Symbol in einer Schaltfläche zu verwenden und dieses Symbol gegen ein anderes auszutauschen, wenn auf die Schaltfläche geklickt wird. Ein Klick auf eine Schaltfläche deutet häufig darauf hin, dass eine Aktion ausgeführt wurde. Das Wechseln von Symbolen kann daher eine nette Berührung der Benutzeroberfläche sein, um die Änderung des Kontexts anzuzeigen und zu bestätigen, dass die Aktion ausgeführt wurde.

Ein möglicher Anwendungsfall könnte ein Download-Button sein. Das Symbol in der Schaltfläche zeigt möglicherweise zunächst an, dass die Schaltfläche einen Download auslöst, wechselt jedoch zu einem Häkchen, wenn auf die Schaltfläche geklickt wurde.

Sehen Sie den Stift MorphSVG in Button on Click von Geoff Graham (@geoffgraham) auf CodePen.

Erstellen wir ein Snippet, das dieses Muster erstellt, damit wir es in anderen ähnlichen Kontexten verwenden können.

Bedarf

Während wir dies als SVG-Snippet einreichen, werden wir uns auf TweenMax von GSAP, eine JavaScript-Bibliothek speziell für die Animation von SVG, und MorphSVG, eine Komponente von TweenMax, verlassen.

Ja, SVG bietet in der Tat native Unterstützung für Animationen, mit denen wir dasselbe erreichen können. Da die SMIL-Unterstützung in zukünftigen Versionen von WebKit- und Blink-Browsern nachlässt und die Unterstützung in IE und Edge völlig fehlt, wird GSAP zu einer viel attraktiveren Alternative.

Lassen Sie uns diese starten und uns ein Muster erstellen!

Schritt 1: Wählen Sie die SVG-Formen

Wir werden eine Form gegen eine andere austauschen. Die für dieses Snippet verwendeten Formen stammen von IcoMoon, das unzählige kostenlose Vektorsymbole enthält. Sie können jedoch auch eigene Formen erstellen. Bereiten Sie in beiden Fällen Ihre Formen vor und fügen Sie sie dem HTML-Code innerhalb eines Schaltflächenelements hinzu.

  Download

Schritt 2: Gestalten Sie den Button und das SVG

Wir können als nächstes das CSS einrichten. Die meisten Stile in unserem Beispiel sind spezifisch für die Demo. Hier ist das Nötigste, was erforderlich ist, damit diese Funktionalität funktioniert.

Beachten Sie, dass das Schlüsselstück die Form verbirgt, in die wir uns standardmäßig verwandeln. Wir tun dies, weil wir beide Formen im DOM benötigen, damit MorphSVG eine gegen die andere austauschen kann, aber wir können nicht beide gleichzeitig anzeigen. Das heißt, wir verstecken die zweite Form und lassen MorphSVG seine Wunder wirken, um sie sichtbar zu machen, wenn es nötig ist.

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

Schritt 3: Mächtige Morphin 'SVGs!

Hier kommen TweenMax und MorphSVG ins Spiel. Der vollständige Code für das Beispiel ist unten angegeben, folgt jedoch diesem allgemeinen Skript:

  • Definieren Sie zu Beginn einige Variablen, damit wir im gesamten Code auf sie verweisen können, ohne sie jedes Mal ausschreiben zu müssen:
    • icons: das vollständige SVG-Element
    • button: die Schaltfläche (oder der Link), die unsere Formen enthält
    • buttonText: der Text innerhalb der Schaltfläche
    • buttonTL: Der MorphSVG-Befehl zum Austauschen des Download-Symbols gegen das Häkchensymbol
  • Hey, JavaScript, achten Sie bitte darauf, dass auf die Schaltfläche geklickt wird, und spielen Sie die MorphSVG-Animation mit alternativen Klicks vorwärts und rückwärts ab.
  • Oh und, hey JavaScript, tauschen Sie auch den Schaltflächentext aus, wenn Sie auf die Schaltfläche klicken.
  • Vielen Dank, 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

Das Folgende ist eine Demo des Codes, den wir behandelt haben:

Sehen Sie den Stift MorphSVG in Button on Click von Geoff Graham (@geoffgraham) auf CodePen.

Verweise

  • GreenSock MorphSVG: Dokumentation zur Verwendung des Plugins.
  • Funktionsweise von SVG Shape Morphing: Chris veröffentlichte dasselbe Konzept mit SMIL und lieferte eine gute Grundlage für dieses Muster.
  • Happy / Sad Pen: Chris Gannons Demo, mit dessen Hilfe die Animation für dieses Muster erstellt wurde.