Formam os ícones de Morph no botão ao clicar - CSS-Tricks

Anonim

A ideia aqui é usar um ícone SVG em um botão e trocar esse ícone por outro quando o botão for clicado. Um clique de botão geralmente sugere que uma ação foi realizada, portanto, alternar os ícones pode ser um bom toque da IU para mostrar a mudança no contexto e confirmar que a ação aconteceu.

Um possível caso de uso poderia ser um botão de download. O ícone no botão pode indicar inicialmente que o botão irá acionar um download, mas muda para uma marca de seleção quando o botão é clicado.

Veja o Pen MorphSVG em Button on Click por Geoff Graham (@geoffgraham) em CodePen.

Vamos criar um snippet que cumpra esse padrão para que possamos usá-lo em outros contextos semelhantes.

Requisitos

Enquanto estamos arquivando isso como um snippet SVG, vamos contar com o TweenMax do GSAP, que é uma biblioteca JavaScript especificamente para animar SVG, e MorphSVG, que é um componente do TweenMax.

Sim, SVG realmente tem suporte nativo para animações que nos permitiriam realizar a mesma coisa. No entanto, com o suporte SMIL diminuindo nas versões futuras dos navegadores WebKit e Blink e sua total falta de suporte no IE e Edge, o GSAP se torna uma alternativa muito mais atraente.

Vamos acioná-los e construir um padrão para nós!

Etapa 1: Escolha as formas SVG

Vamos trocar uma forma por outra. As formas usadas para este trecho vieram do IcoMoon, que tem vários ícones de vetor gratuitos, mas você também pode fazer o seu próprio. De qualquer forma, prepare suas formas e vamos adicioná-las ao HTML dentro de um elemento de botão.

  Download

Etapa 2: definir o estilo do botão e SVG

Podemos configurar o CSS a seguir. A maioria dos estilos em nosso exemplo são específicos para a demonstração. Aqui está o mínimo do que é necessário para fazer essa funcionalidade funcionar.

Observe que a peça-chave está escondendo a forma em que estamos nos transformando por padrão. Fazemos isso porque precisamos de ambas as formas no DOM para que o MorphSVG troque uma pela outra, mas não podemos mostrar as duas ao mesmo tempo. Isso significa que ocultamos a segunda forma e deixamos o MorphSVG fazer suas maravilhas para torná-lo visível quando necessário.

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

Etapa 3: SVGs do Mighty Morphin '!

É aqui que o TweenMax e o MorphSVG entram em jogo. O código completo para o exemplo é fornecido abaixo, mas segue este script geral:

  • Defina algumas variáveis ​​para começar, para que possamos nos referir a elas em todo o código sem ter que escrevê-las toda vez:
    • icons: o elemento SVG completo
    • button: o botão (ou link) que contém nossas formas
    • buttonText: o texto dentro do botão
    • buttonTL: O comando MorphSVG para trocar o ícone de download pelo ícone da marca de seleção
  • Ei, JavaScript, preste atenção ao botão a ser clicado e reproduza a animação MorphSVG para frente e para trás em cliques alternados.
  • Ah, e aí, JavaScript, também troque o texto do botão quando ele for clicado.
  • Obrigado 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

A seguir está uma demonstração do código que cobrimos:

Veja o Pen MorphSVG em Button on Click por Geoff Graham (@geoffgraham) em CodePen.

Referências

  • GreenSock MorphSVG: Documentação para usar o plugin.
  • Como funciona o SVG Shape Morphing: Chris publicou esse mesmo conceito usando SMIL e forneceu uma boa base para esse padrão.
  • Happy / Sad Pen: demo de Chris Gannon que ajudou a construir a animação para este padrão.