Icônes de morphing de forme dans le bouton au clic - Astuces CSS

Anonim

L'idée ici est d'utiliser une icône SVG dans un bouton et de remplacer cette icône par une autre lorsque vous cliquez sur le bouton. Un clic sur un bouton suggère souvent qu'une action a été entreprise, donc changer d'icônes peut être une belle touche d'interface utilisateur pour afficher le changement dans le contexte et confirmer que l'action a bien eu lieu.

Un cas d'utilisation possible pourrait être un bouton de téléchargement. L'icône dans le bouton peut initialement indiquer que le bouton déclenchera un téléchargement, mais se changera en coche lorsque le bouton aura été cliqué.

Voir le Pen MorphSVG dans Button on Click de Geoff Graham (@geoffgraham) sur CodePen.

Créons un extrait qui accomplit ce modèle afin que nous puissions l'utiliser dans d'autres contextes similaires.

Conditions

Pendant que nous classons cela sous forme d'extrait de code SVG, nous allons nous appuyer sur TweenMax de GSAP, qui est une bibliothèque JavaScript spécifiquement pour l'animation de SVG, et MorphSVG, qui est un composant de TweenMax.

Oui, SVG a en effet un support natif pour les animations qui nous permettront d'accomplir la même chose. Cependant, avec la disparition du support SMIL dans les futures versions des navigateurs WebKit et Blink et le manque total de support dans IE et Edge, GSAP devient une alternative beaucoup plus attrayante.

Allumons-les et construisons-nous un modèle!

Étape 1: Choisissez les formes SVG

Nous allons remplacer une forme par une autre. Les formes utilisées pour cet extrait de code proviennent d'IcoMoon, qui contient des tonnes d'icônes vectorielles gratuites, mais vous pouvez également créer les vôtres. Dans tous les cas, préparez vos formes et ajoutons-les au HTML à l'intérieur d'un élément de bouton.

  Download

Étape 2: Stylisez le bouton et SVG

Nous pouvons ensuite configurer le CSS. La plupart des styles de notre exemple sont spécifiques à la démo. Voici le strict minimum de ce qui est nécessaire pour faire fonctionner cette fonctionnalité.

Notez que l'élément clé cache la forme dans laquelle nous nous transformons par défaut. Nous faisons cela parce que nous avons besoin des deux formes dans le DOM pour MorphSVG pour échanger l'une contre l'autre, mais nous ne pouvons pas afficher les deux en même temps. Cela signifie que nous masquons la deuxième forme et laissons MorphSVG faire ses merveilles pour la rendre visible quand il en a besoin.

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

Étape 3: SVG de Mighty Morphin!

C'est là que TweenMax et MorphSVG entrent en jeu. Le code complet de l'exemple est fourni ci-dessous, mais il suit ce script général:

  • Définissez quelques variables pour commencer afin que nous puissions y faire référence tout au long du code sans avoir à les écrire à chaque fois:
    • icons: l'élément SVG complet
    • button: le bouton (ou lien) qui contient nos formes
    • buttonText: le texte à l'intérieur du bouton
    • buttonTL: La commande MorphSVG pour permuter l'icône de téléchargement pour l'icône de coche
  • Hé, JavaScript, surveillez s'il vous plaît que le bouton soit cliqué et lisez l'animation MorphSVG en avant et en arrière sur des clics alternés.
  • Oh et, hé JavaScript, échangez également le texte du bouton lorsque vous cliquez sur le bouton.
  • Merci, 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);

Démo

Ce qui suit est une démo du code que nous avons couvert:

Voir le Pen MorphSVG dans Button on Click de Geoff Graham (@geoffgraham) sur CodePen.

Les références

  • GreenSock MorphSVG: Documentation pour l'utilisation du plugin.
  • Comment fonctionne le morphing de forme SVG: Chris a publié ce même concept en utilisant SMIL et a fourni une belle base pour ce modèle.
  • Happy / Sad Pen: la démo de Chris Gannon qui a aidé à construire l'animation de ce motif.