Bentuk Ikon Morphing dalam Butang Klik - Trik CSS

Anonim

Ideanya di sini adalah menggunakan ikon SVG dalam butang dan menukar ikon itu untuk yang lain apabila butang diklik. Klik butang sering menunjukkan tindakan telah diambil, jadi beralih ikon boleh menjadi sentuhan UI yang bagus untuk menunjukkan perubahan dalam konteks dan mengesahkan bahawa tindakan tersebut telah berlaku.

Kes penggunaan yang mungkin adalah butang muat turun. Ikon di butang pada awalnya mungkin menunjukkan bahawa butang akan memicu muat turun tetapi berubah menjadi tanda semak apabila butang telah diklik.

Lihat Pen MorphSVG di Butang pada Klik oleh Geoff Graham (@geoffgraham) di CodePen.

Mari buat coretan yang mencapai corak ini supaya kita dapat menggunakannya dalam konteks lain yang serupa.

Keperluan

Walaupun kami memfailkan ini sebagai cuplikan SVG, kami akan bergantung pada TweenMax GSAP, yang merupakan perpustakaan JavaScript khusus untuk menghidupkan SVG, dan MorphSVG, yang merupakan komponen dari TweenMax.

Ya, SVG memang mempunyai sokongan asli untuk animasi yang memungkinkan kita untuk mencapai perkara yang sama. Namun, dengan sokongan SMIL yang semakin berkurang pada versi WebKit dan penyemak imbas Blink di masa hadapan dan kekurangan sokongan sepenuhnya di IE dan Edge, GSAP menjadi alternatif yang lebih menarik.

Mari aktifkan dan membina corak!

Langkah 1: Pilih Bentuk SVG

Kita akan menukar satu bentuk dengan bentuk yang lain. Bentuk yang digunakan untuk potongan ini berasal dari IcoMoon, yang mempunyai banyak ikon vektor percuma, tetapi anda juga boleh membuat sendiri. Walau apa pun, sediakan bentuk anda dan mari kita tambahkannya ke HTML di dalam elemen butang.

  Download

Langkah 2: Gaya Butang dan SVG

Kami boleh menyediakan CSS seterusnya. Sebilangan besar gaya dalam contoh kami adalah khusus untuk demo. Inilah minimum perkara yang diperlukan untuk menjadikan fungsi ini berfungsi.

Perhatikan bahawa kunci adalah menyembunyikan bentuk yang kita ubah secara lalai. Kami melakukan ini kerana kami memerlukan kedua-dua bentuk di DOM agar MorphSVG menukar satu dengan yang lain, tetapi kami tidak dapat menunjukkan keduanya pada masa yang sama. Ini bermakna kita menyembunyikan bentuk kedua dan membiarkan MorphSVG mengerjakan keajaibannya untuk menjadikannya kelihatan ketika diperlukan.

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

Langkah 3: SVG Morphin Mighty!

Di sinilah TweenMax dan MorphSVG mula bermain. Kod lengkap untuk contoh disediakan di bawah, tetapi mengikut skrip umum ini:

  • Tentukan beberapa pemboleh ubah untuk dimulakan supaya kita dapat merujuknya ke seluruh kod tanpa perlu menulisnya setiap kali:
    • icons: elemen SVG penuh
    • button: butang (atau pautan) yang mengandungi bentuk kami
    • buttonText: teks di dalam butang
    • buttonTL: Perintah MorphSVG untuk menukar ikon muat turun untuk ikon tanda semak
  • Hai, JavaScript, sila perhatikan butang yang akan diklik dan mainkan animasi MorphSVG ke depan dan sebaliknya pada klik alternatif.
  • Oh dan, hei JavaScript, juga menukar teks butang apabila butang diklik.
  • Terima kasih, 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

Berikut adalah demo kod yang telah kami bahas:

Lihat Pen MorphSVG di Butang pada Klik oleh Geoff Graham (@geoffgraham) di CodePen.

Rujukan

  • GreenSock MorphSVG: Dokumentasi untuk menggunakan pemalam.
  • Bagaimana SVG Shape Morphing Berfungsi: Chris menerbitkan konsep yang sama menggunakan SMIL dan memberikan asas yang baik untuk corak ini.
  • Happy / Sad Pen: Demo Chris Gannon yang membantu membina animasi untuk corak ini.