Muuta Morphing-kuvakkeet Napsauta-painikkeessa - CSS-temppuja

Anonim

Ajatuksena on käyttää SVG-kuvaketta painikkeessa ja vaihtaa tämä kuvake toiseen, kun painiketta napsautetaan. Napin painallus viittaa usein toimintaan, joten kuvakkeiden vaihtaminen voi olla mukava käyttöliittymän kosketus, joka näyttää muutoksen kontekstissa ja vahvistaa, että toiminto on tapahtunut.

Mahdollinen käyttötapa voi olla latauspainike. Painikkeen kuvake saattaa aluksi osoittaa, että painike käynnistää latauksen, mutta muuttuu valintamerkiksi, kun painiketta on napsautettu.

Katso Geoff Graham (@geoffgraham) CodePenistä Pen MorphSVG in Button on Click.

Luodaan katkelma, joka toteuttaa tämän mallin, jotta voimme käyttää sitä muissa vastaavissa yhteyksissä.

Vaatimukset

Kun arkistoimme tämän SVG-katkelmana, luotamme GSAP: n TweenMaxiin, joka on JavaScript-kirjasto nimenomaan SVG: n animointiin, ja MorphSVG: hen, joka on TweenMaxin komponentti.

Kyllä, SVG: llä on todellakin natiivi tuki animaatioille, jotka antavat meille mahdollisuuden saavuttaa sama asia. SMIL-tuen vähentyessä WebKit- ja Blink-selainten tulevissa versioissa ja IE: n ja Edgen tuen puutteesta GSAP: sta tulee kuitenkin paljon houkuttelevampi vaihtoehto.

Ammutaan ne ylös ja rakennetaan meille malli!

Vaihe 1: Valitse SVG-muodot

Vaihdamme yhden muodon toiseen. Tähän katkelmaan käytetyt muodot tulivat IcoMoonista, jolla on paljon ilmaisia ​​vektorikuvakkeita, mutta voit tehdä myös oman. Joko niin, valmistele muotosi ja lisätään ne painike-elementin HTML-koodiin.

  Download

Vaihe 2: Työnnä painike ja SVG

Voimme määrittää CSS: n seuraavaksi. Suurin osa esimerkissämme olevista tyyleistä on ominaista demolle. Tässä on vähimmäisvaatimus tämän toiminnon toimivuudesta.

Huomaa, että avainkappale piilottaa muodon, johon oletuksena morfoimme. Teemme tämän, koska tarvitsemme molemmat muodot DOM: ssa, jotta MorphSVG voi vaihtaa toisensa, mutta emme voi näyttää molempia samanaikaisesti. Tämä tarkoittaa, että piilotamme toisen muodon ja annamme MorphSVG: n tehdä ihmeensä saadakseen sen näkyviin tarvittaessa.

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

Vaihe 3: Mighty Morphin 'SVG: t!

Täällä TweenMax ja MorphSVG tulevat esiin. Esimerkin koko koodi on annettu alla, mutta se noudattaa tätä yleistä komentosarjaa:

  • Määritä muutama muuttuja aloittaaksesi, jotta voimme viitata niihin koko koodissa tarvitsematta kirjoittaa niitä joka kerta:
    • icons: koko SVG-elementti
    • button: painike (tai linkki), joka sisältää muotomme
    • buttonText: painikkeen sisällä oleva teksti
    • buttonTL: MorphSVG-komento vaihtaa latauskuvake valintamerkkikuvakkeeksi
  • Hei, JavaScripti, tarkista, että painiketta napsautetaan, ja toista MorphSVG-animaatio eteenpäin ja päinvastoin vaihtoehtoisilla napsautuksilla.
  • Voi ja hei JavaScript, vaihda myös painikkeen teksti, kun painiketta napsautetaan.
  • Kiitos, 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

Seuraava on esittely katetusta koodista:

Katso Geoff Graham (@geoffgraham) CodePenistä Pen MorphSVG in Button on Click.

Viitteet

  • GreenSock MorphSVG: Dokumentaatio laajennuksen käyttämistä varten.
  • Kuinka SVG Shape Morphing toimii: Chris julkaisi saman konseptin SMIL: n avulla ja loi hyvän pohjan tälle mallille.
  • Iloinen / surullinen kynä: Chris Gannonin demo, joka auttoi rakentamaan tämän mallin animaation.