Tıklandığında Düğmede Şekil Dönüşüm Simgeleri - CSS Hileleri

Anonim

Buradaki fikir, bir düğmede bir SVG simgesi kullanmak ve düğme tıklandığında bu simgeyi başka bir simgeyle değiştirmektir. Bir düğme tıklaması genellikle bir işlemin yapıldığını gösterir, bu nedenle simgelerin değiştirilmesi, bağlamdaki değişikliği göstermek ve işlemin gerçekleştiğini onaylamak için güzel bir UI dokunuşu olabilir.

Olası bir kullanım örneği, bir indirme düğmesi olabilir. Düğmedeki simge başlangıçta düğmenin bir indirmeyi tetikleyeceğini ancak düğme tıklandığında bir onay işaretine dönüşeceğini belirtebilir.

CodePen'de Geoff Graham (@geoffgraham) tarafından yazılan Button on Click'te Pen MorphSVG'ye bakın.

Bu kalıbı gerçekleştiren bir pasaj oluşturalım, böylece onu diğer benzer bağlamlarda kullanabilelim.

Gereksinimler

Bunu bir SVG parçacığı olarak doldururken, özellikle SVG'yi canlandırmak için bir JavaScript kitaplığı olan GSAP'ın TweenMax'ına ve TweenMax'ın bir bileşeni olan MorphSVG'ye güveneceğiz.

Evet, SVG'nin gerçekten de aynı şeyi başarmamıza izin veren animasyonlar için yerel desteği var. Bununla birlikte, WebKit ve Blink tarayıcılarının gelecekteki sürümlerinde SMIL desteğinin azalması ve IE ve Edge'de tamamen desteklenmemesi ile GSAP çok daha çekici bir alternatif haline geliyor.

Bunları ateşleyelim ve bize bir model oluşturalım!

1. Adım: SVG Şekillerini Seçin

Bir şekli diğeriyle değiştireceğiz. Bu pasaj için kullanılan şekiller, tonlarca ücretsiz vektör ikonuna sahip olan IcoMoon'dan geldi, ancak siz de kendiniz yapabilirsiniz. Her iki durumda da şekillerinizi hazırlayın ve onları bir düğme öğesinin içindeki HTML'ye ekleyelim.

  Download

2. Adım: Düğmenin ve SVG'nin Stili

Bundan sonra CSS'yi kurabiliriz. Örneğimizdeki stillerin çoğu demoya özgüdür. İşte bu işlevselliğin çalışması için gerekli olanların asgari kısmı.

Anahtar parçanın varsayılan olarak dönüştüğümüz şekli gizlediğini unutmayın. Bunu yapıyoruz çünkü MorphSVG'nin DOM'da birini diğeriyle değiştirmesi için her iki şekle de ihtiyacımız var, ancak ikisini aynı anda gösteremiyoruz. Bu, ikinci şekli sakladığımız ve gerektiğinde onu görünür kılmak için MorphSVG'nin harikalarını çalıştırmasına izin verdiğimiz anlamına gelir.

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

3. Adım: Mighty Morphin'in SVG'leri!

TweenMax ve MorphSVG burada devreye giriyor. Örnek için tam kod aşağıda verilmiştir, ancak bu genel komut dosyasını izler:

  • Başlamak için birkaç değişken tanımlayın, böylece her seferinde onları yazmak zorunda kalmadan kod boyunca bunlara başvurabiliriz:
    • icons: tam SVG öğesi
    • button: şekillerimizi içeren düğme (veya bağlantı)
    • buttonText: düğmenin içindeki metin
    • buttonTL: Onay işareti simgesi ile indirme simgesini değiştirmek için MorphSVG komutu
  • Hey, JavaScript, lütfen düğmenin tıklanmasını bekleyin ve MorphSVG animasyonunu alternatif tıklamalarda ileri ve geri oynatın.
  • Ve, hey JavaScript, düğme tıklandığında da düğme metnini değiştirir.
  • Teşekkürler 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

Aşağıda, ele aldığımız kodun bir demosu yer almaktadır:

CodePen'de Geoff Graham (@geoffgraham) tarafından yazılan Button on Click'te Pen MorphSVG'ye bakın.

Referanslar

  • GreenSock MorphSVG: Eklentiyi kullanmak için belgeler.
  • SVG Shape Morphing Nasıl Çalışır: Chris aynı konsepti SMIL kullanarak yayınladı ve bu model için güzel bir temel sağladı.
  • Mutlu / Üzgün ​​Kalem: Chris Gannon'un bu model için animasyonun oluşturulmasına yardımcı olan demosu.