Оформете Morphing икони в бутон при щракване - CSS-трикове

Anonim

Идеята тук е да използвате SVG икона в бутон и да я замените с друга, когато бутонът бъде щракнат. Щракването с бутон често предполага, че е предприето действие, така че превключването на икони може да бъде приятно докосване на потребителския интерфейс, за да покаже промяната в контекста и да потвърди, че действието се е случило.

Възможен случай на употреба може да бъде бутон за изтегляне. Иконата в бутона може първоначално да показва, че бутонът ще задейства изтегляне, но ще премине към отметка, когато бутонът е щракнат.

Вижте Pen MorphSVG в Button on Click от Geoff Graham (@geoffgraham) на CodePen.

Нека създадем фрагмент, който изпълнява този модел, за да можем да го използваме в други подобни контексти.

Изисквания

Докато подаваме това като SVG фрагмент, ще разчитаме на TweenMax на GSAP, който е 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: Могъщи Morphin 'SVG!

Тук влизат в игра 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);

Демонстрация

По-долу е демонстрация на кода, който сме разгледали:

Вижте Pen MorphSVG в Button on Click от Geoff Graham (@geoffgraham) на CodePen.

Препратки

  • GreenSock MorphSVG: Документация за използване на приставката.
  • Как работи SVG Shape Morphing: Крис публикува същата концепция, използвайки SMIL и осигури добра основа за този модел.
  • Happy / Sad Pen: Демонстрацията на Chris Gannon, която помогна да се изгради анимацията за този модел.