Иконки изменения формы в кнопке при нажатии - CSS-хитрости

Идея здесь состоит в том, чтобы использовать значок SVG на кнопке и заменять этот значок другим при нажатии кнопки. Нажатие кнопки часто предполагает, что действие было выполнено, поэтому переключение значков может быть приятным прикосновением к пользовательскому интерфейсу, чтобы показать изменение в контексте и подтвердить, что действие произошло.

Возможным вариантом использования может быть кнопка загрузки. Значок на кнопке может изначально указывать на то, что кнопка запускает загрузку, но изменится на галочку при нажатии кнопки.

См. Pen MorphSVG in Button on Click от Джеффа Грэма (@geoffgraham) на CodePen.

Давайте создадим фрагмент, который реализует этот шаблон, чтобы мы могли использовать его в других подобных контекстах.

Требования

Пока мы регистрируем это как фрагмент SVG, мы будем полагаться на GSAP TweenMax, которая представляет собой библиотеку JavaScript специально для анимации SVG, и MorphSVG, который является компонентом TweenMax.

Да, SVG действительно имеет встроенную поддержку анимации, которая позволяет нам делать то же самое. Однако в связи с уменьшением поддержки SMIL в будущих версиях браузеров WebKit и Blink и полным отсутствием поддержки в IE и Edge GSAP становится гораздо более привлекательной альтернативой.

Давайте запустим их и построим нам шаблон!

Шаг 1. Выберите фигуры SVG

Мы собираемся поменять одну форму на другую. Формы, используемые для этого фрагмента, взяты из IcoMoon, в котором есть множество бесплатных векторных иконок, но вы также можете создать свои собственные. В любом случае, подготовьте свои формы и давайте добавим их в HTML внутри элемента кнопки.

  Download

Шаг 2: стиль кнопки и SVG

Теперь мы можем настроить CSS. Большинство стилей в нашем примере относятся к демо. Вот минимум того, что необходимо для работы этой функции.

Обратите внимание, что ключевой элемент скрывает форму, в которую мы трансформируемся по умолчанию. Мы делаем это, потому что нам нужны обе формы в модели DOM для MorphSVG, чтобы поменять одну на другую, но мы не можем показать обе одновременно. Это означает, что мы скрываем вторую форму и позволяем MorphSVG творить чудеса, чтобы сделать ее видимой, когда это необходимо.

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

Шаг 3: SVG Mighty Morphin!

Здесь в игру вступают TweenMax и MorphSVG. Полный код этого примера приведен ниже, но он следует этому общему сценарию:

Определите для начала несколько переменных, чтобы мы могли ссылаться на них во всем коде, не записывая их каждый раз:

icons: полный элемент SVG
button: кнопка (или ссылка), содержащая наши фигуры
buttonText: текст внутри кнопки
buttonTL: Команда MorphSVG для замены значка загрузки на значок галочки

Привет, JavaScript, пожалуйста, следите за нажатием кнопки и воспроизводите анимацию MorphSVG вперед и назад при попеременных щелчках.
О, и, привет, JavaScript, также меняйте местами текст кнопки при нажатии кнопки.
Спасибо, 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);