Bentuk Ikon Morphing di Tombol di Klik - Trik CSS

Anonim

Idenya di sini adalah menggunakan ikon SVG di tombol dan menukar ikon itu dengan yang lain ketika tombol diklik. Klik tombol sering kali menunjukkan bahwa tindakan telah diambil, jadi peralihan ikon bisa menjadi sentuhan UI yang bagus untuk menunjukkan perubahan dalam konteks dan mengonfirmasi bahwa tindakan tersebut telah terjadi.

Kasus penggunaan yang mungkin bisa berupa tombol unduh. Ikon di tombol mungkin awalnya menunjukkan bahwa tombol tersebut akan memicu unduhan tetapi berubah menjadi tanda centang ketika tombol telah diklik.

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

Mari buat cuplikan yang menyelesaikan pola ini sehingga kita dapat menggunakannya dalam konteks serupa lainnya.

Persyaratan

Sementara kami mengajukan ini sebagai cuplikan SVG, kami akan mengandalkan TweenMax GSAP, yang merupakan pustaka JavaScript khusus untuk menganimasikan SVG, dan MorphSVG, yang merupakan komponen TweenMax.

Ya, SVG memang memiliki dukungan asli untuk animasi yang memungkinkan kita mencapai hal yang sama. Namun, dengan berkurangnya dukungan SMIL di versi mendatang dari browser WebKit dan Blink dan kurangnya dukungan di IE dan Edge, GSAP menjadi alternatif yang jauh lebih menarik.

Ayo nyalakan itu dan buat pola untuk kita!

Langkah 1: Pilih Bentuk SVG

Kami akan menukar satu bentuk dengan yang lain. Bentuk yang digunakan untuk potongan ini berasal dari IcoMoon, yang memiliki banyak ikon vektor gratis, tetapi Anda juga dapat membuatnya sendiri. Apa pun itu, persiapkan bentuk Anda dan tambahkan ke HTML di dalam elemen tombol.

  Download

Langkah 2: Beri Style pada Tombol dan SVG

Selanjutnya kita dapat mengatur CSS. Sebagian besar gaya dalam contoh kami khusus untuk demo. Inilah minimal dari apa yang diperlukan untuk membuat fungsi ini berfungsi.

Perhatikan bahwa bagian kunci menyembunyikan bentuk yang akan kita ubah secara default. Kami melakukan ini karena kami membutuhkan kedua bentuk di DOM untuk MorphSVG untuk menukar satu dengan yang lain, tetapi kami tidak dapat menampilkan keduanya secara bersamaan. Itu berarti kita menyembunyikan bentuk kedua dan membiarkan MorphSVG bekerja dengan sangat baik untuk membuatnya terlihat saat 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 Mighty Morphin!

Di sinilah TweenMax dan MorphSVG berperan. Kode lengkap untuk contoh diberikan di bawah ini, tetapi mengikuti skrip umum ini:

  • Tentukan beberapa variabel untuk memulai sehingga kita dapat merujuknya ke seluruh kode tanpa harus menuliskannya setiap saat:
    • icons: elemen SVG lengkap
    • button: tombol (atau tautan) yang berisi bentuk kita
    • buttonText: teks di dalam tombol
    • buttonTL: Perintah MorphSVG untuk menukar ikon unduh dengan ikon tanda centang
  • Halo, JavaScript, perhatikan tombol yang akan diklik dan putar animasi MorphSVG maju dan mundur pada klik alternatif.
  • Oh dan, hei JavaScript, tukar juga teks tombol saat tombol 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 ini adalah demo kode yang telah kami bahas:

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

Referensi

  • GreenSock MorphSVG: Dokumentasi untuk menggunakan plugin.
  • Bagaimana SVG Shape Morphing Bekerja: Chris menerbitkan konsep yang sama ini menggunakan SMIL dan memberikan dasar yang bagus untuk pola ini.
  • Happy / Sad Pen: Demo Chris Gannon yang membantu membuat animasi untuk pola ini.