Формуйте піктограми морфінгу в кнопці на клацання - CSS-хитрощі

Anonim

Ідея тут полягає у використанні піктограми SVG у кнопці та заміни цієї піктограми на іншу при натисканні кнопки. Клацання кнопки часто означає, що було здійснено певну дію, тому перемикання піктограм може бути приємним дотиком до інтерфейсу, щоб показати зміну в контексті та підтвердити, що дія відбулася.

Можливим варіантом використання може бути кнопка завантаження. Піктограма на кнопці спочатку може означати, що кнопка ініціює завантаження, але після натискання кнопки зміниться на позначку.

Дивіться Pen MorphSVG у кнопці на клацання Джеффа Грем (@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: Могутні морфінські 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 у кнопці на клацання Джеффа Грем (@geoffgraham) на CodePen.

Список літератури

  • GreenSock MorphSVG: Документація щодо використання плагіна.
  • Як працює SVG Shape Morphing: Кріс опублікував цю саму концепцію, використовуючи SMIL, і створив хороший фундамент для цієї моделі.
  • Happy / Sad Pen: демонстрація Кріса Ганнона, яка допомогла побудувати анімацію для цього візерунка.