Обликујте иконе Морпхинг у дугмету на клик - ЦСС-трикови

Anonim

Идеја овде је да користите икону СВГ у дугмету и замените је за другу када се кликне на дугме. Клик на дугме често сугерише да је предузета радња, тако да пребацивање икона може бити леп додир корисничког интерфејса да би се приказала промена у контексту и потврдило да се радња догодила.

Могући случај употребе може бити дугме за преузимање. Икона на дугмету у почетку може значити да ће дугме покренути преузимање, али ће се променити у знак за потврду када се кликне на дугме.

Погледајте Пен МорпхСВГ у Буттон он Цлицк Геофф Грахам (@геоффграхам) на ЦодеПен-у.

Направимо исечак који остварује овај образац како бисмо га могли користити у другим сличним контекстима.

Захтеви

Док ово подносимо као СВГ исечак, ослањаћемо се на ГСАП-ов ТвеенМак, који је ЈаваСцрипт библиотека посебно за анимирање СВГ-а, и МорпхСВГ, који је компонента ТвеенМак-а.

Да, СВГ заиста има изворну подршку за анимације које нам омогућавају да постигнемо исту ствар. Међутим, с СМИЛ подршком која опада у будућим верзијама претраживача ВебКит и Блинк и потпуни недостатак подршке у ИЕ и Едге, ГСАП постаје много атрактивнија алтернатива.

Отпустимо те и направимо нам образац!

Корак 1: Изаберите СВГ облике

Заменит ћемо један облик за други. Облици коришћени за овај исечак потичу из ИцоМоон-а, који има на тоне бесплатних векторских икона, али можете и сами да направите своје. У сваком случају, припремите своје облике и додајте их у ХТМЛ унутар елемента дугмета.

  Download

Корак 2: Стил дугмета и СВГ

Следећи можемо да подесимо ЦСС. Већина стилова у нашем примеру специфични су за демонстрацију. Ево најмањег потребног за функционисање ове функције.

Имајте на уму да кључни део подразумевано крије облик у који се претварамо. То радимо јер су нам потребна оба облика у ДОМ-у да би МорпхСВГ заменио један за други, али не можемо истовремено да прикажемо оба. То значи да сакривамо други облик и допуштамо МорпхСВГ-у да чини своја чуда како би био видљив када затреба.

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

Корак 3: Моћни Морпхин 'СВГ-ови!

Овде наступају ТвеенМак и МорпхСВГ. Комплетни код за пример је дат испод, али следи следећу општу скрипту:

  • Дефинишите неколико променљивих за почетак како бисмо се могли позивати на њих у целом коду без потребе да их сваки пут исписујемо:
    • icons: пуни СВГ елемент
    • button: дугме (или веза) које садржи наше облике
    • buttonText: текст унутар дугмета
    • buttonTL: МорпхСВГ наредба за замену иконе за преузимање за икону квачице
  • Хеј, ЈаваСцрипт, припазите да се кликне на дугме и репродукујте МорпхСВГ анимацију унапред и уназад на алтернативним кликовима.
  • Ох, хеј, ЈаваСцрипт, такође замените текст дугмета када се кликне на дугме.
  • Хвала вам, ЈаваСцрипт
// 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);

Демо

Следи демонстрација кода коју смо обрадили:

Погледајте Пен МорпхСВГ у Буттон он Цлицк Геофф Грахам (@геоффграхам) на ЦодеПен-у.

Референце

  • ГреенСоцк МорпхСВГ: Документација за употребу додатка.
  • Како функционише СВГ Схапе Морпхинг: Цхрис је објавио исти концепт користећи СМИЛ и пружио лепу основу за овај образац.
  • Срећна / тужна оловка: демонстрација Цхриса Ганнона која је помогла у конструисању анимације за овај образац.