Animerte Grensen

0
6

Overgangen grensen for en svevende tilstand. Enkelt, ikke sant? Du kan bli ubehagelig overrasket.

Utfordringen

Utfordringen er enkel: å bygge en knapp med et ekspanderende grensen på hold.

Denne artikkelen vil fokusere på ekte CSS triks som ville være lett å falle inn i et prosjekt uten å berøre den DOM eller bruke JavaScript. Metodene som er beskrevet her vil følge disse reglene

  • Enkelt element (noen helper divs, men psuedo-elementer er tillatt)
  • CSS (ingen JavaScript -)
  • Som fungerer for noen størrelse (ikke begrenset til en bestemt bredde, høyde, eller sideforhold)
  • Støtter gjennomsiktig bakgrunn
  • Glatt og effektivt overgang

Jeg foreslo denne utfordringen i Animasjon på Jobb Slakk og igjen . Men det var ingen enighet om at den beste tilnærmingen, jeg fikk noen virkelig smarte ideer med noen fenomenale utviklere.

Metode 1: Animere grensen

Den enkleste måten å animere en kant er… vel, ved å animere grensen.

.border-knappen {
border: solid 5px #FC5185;
overgang: border-width 0.6 s lineær;
}

.border-knappen:hover { border-width: 10px; }

Se Penn CSS-skriver-modus eksperiment ved Shaw (@shshaw) på CodePen.

Fin og enkel, men det er noen store ytelsesproblemer.

Siden grensen tar opp plass i dokumentets layout, endre border-width vil utløse layout. Nærliggende elementer vil flytte seg rundt på grunn av den nye grensen størrelse, noe som gjør nettleseren flytte disse elementene hver ramme av animasjon med mindre du angi et eksplisitt størrelse på knappen.

Som om utløsende layout ikke var ille nok, selve overgangen føles “tråkket”. Jeg vil vise hvorfor i neste eksempel.

Metode 2: Bedre grensen til disposisjon

Hvordan kan vi endre grensen uten å utløse layout? Ved hjelp av disposisjonen i stedet! Du er sannsynligvis mest kjent med disposisjon for å fjerne den på :fokus stiler (selv om du ikke burde), men disposisjonen er en ytre linje som ikke endrer et element størrelse eller posisjon i oppsettet.

.border-knappen {
disposisjon: solid 5px #FC5185;
overgang: skisse 0.6 s lineær;
margin: 0.5 em; /* Økt margin siden omrisset utvider utenfor element */
}

.border-knappen:hover { outline-width: 10px; }

En rask sjekk i Dev Verktøy’ Resultater-fanen viser omrisset overgangen ikke utløser layout. Uansett, bevegelse synes fortsatt gikk på grunn nettlesere er avrunding border-width og outline-width verdier slik at du ikke får sub-pixel gjengivelse mellom 5 og 6 eller myke overganger fra 5.4 til 5.5.

Merkelig, Safari ofte ikke gjengis omrisset overgang og av og til etterlater sprø gjenstander.

Metode 3: Klippe det med clip-banen

Først implementert av Steve Gardner, denne metoden bruker clip-banen med calc å trimme kanter ned så på hover vi kan overgangen til å avsløre den fulle grensen.

.border-knappen {
/* Full bredde grensen og et klipp-banen visuelt kutte det ned til start størrelse */
border: solid 10px #FC5185;
klipp-bane: polygon(
calc(0% + 5px) calc(0% + 5px), /* øverst til venstre */
calc(100% – 5px) calc(0% + 5px), /* øverst til høyre */
calc(100% – 5px) calc(100% – 5px), /* nederst til høyre */
calc(0% + 5px) calc(100% – 5px) /* nederst til venstre */
);
overgang: clip-banen 0.6 s lineær;
}

.border-knappen:hover {
/* Klipp-banen som spenner over hele feltet, slik at det ikke lenger er gjemmer seg i full bredde grensen. */
klipp-bane: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

klipp-bane teknikken er den jevneste og mest effektivt metode så langt, men kommer med et par forbehold. Avrundingsfeil kan føre til litt ujevnheter, avhengig av den eksakte størrelse. Grensen har også å være full størrelse fra start, noe som kan gjøre nøyaktig posisjonering vanskelig.

Dessverre er det ingen IE/Edge-støtte ennå, selv om det synes å være i utvikling. Du kan og bør oppmuntre til Microsofts team for å implementere disse funksjonene ved å stemme for masker/clip-banen for å bli lagt til.

Metode 4: linear-gradient bakgrunn

Vi kan simulere en ramme ved hjelp av en smart kombinasjon av flere linear-gradient bakgrunn riktig størrelse. I sum har vi fire ulike graderinger, ett for hver side. Bakgrunnen-posisjon og bakgrunn-størrelse egenskaper får hver gradient på riktig sted og riktig størrelse, som kan deretter bli overført til å gjøre grensen utvide.

.border-knappen {
background-repeat: no-repeat;

/* background-size-verdier vil gjenta så vi trenger bare å erklære dem en gang */
bakgrunn-size:
calc(100% – 10px) 5px, /* topp og bunn */
5px calc(100% – 10px); /* høyre og venstre */

bakgrunn-posisjon:
5px 5px, /* toppen */
calc(100% – 5px) 5px, /* høyre */
5px calc(100% – 5px), /* bunnen */
5px 5px; /* venstre */

/* Siden vi er dimensjonering og lokalisering med de ovennevnte egenskaper, vi trenger bare å sette opp en enkel solid fargegraderinger for hver side */
background-image:
linear-gradient(0deg, #FC5185, #FC5185),
linear-gradient(0deg, #FC5185, #FC5185),
linear-gradient(0deg, #FC5185, #FC5185),
linear-gradient(0deg, #FC5185, #FC5185);

overgang: alle 0.6 s lineær;
overgangen-eiendom: bakgrunn-størrelse, bakgrunn-posisjon;
}

.border-knappen:hover {
bakgrunn-posisjon: 0 0, 100% 0, 0 100%, 0 0;
bakgrunn-størrelse: 100% 10px, 10px 100%, 100% 10px, 10px 100%;
}

Denne metoden er ganske vanskelig å sette opp, og har ganske mange kryss-nettleser forskjeller. Firefox og Safari animere faux-grensen jevnt, akkurat den effekten vi er ute etter. Chrome-animasjon er hakkete og enda mer givende enn omrisset og grensen overganger. IE og Kanten nekte å animere bakgrunn i det hele tatt, men de gir riktig grensen utvidelse effekt.

Metode 5: Fake det med box-shadow

Skjult i box-shadow er spec er en fjerde verdi for spredt-radius. Satt alle de andre lengde verdier til 0px og bruk spredning-radius for å bygge din grensen alternativ som, som skisserer, vil ikke påvirke utformingen.

.border-knappen {
box-shadow: 0px 0px 0px 5px #FC5185;
overgang: box-shadow 0.6 s lineær;
margin: 0.5 em; /* Økt margin siden safe-shado utvider utenfor element, som skissere */
}

.border-knappen:hover { box-shadow: 0px 0px 0px 10px #FC5185; }

Overgang med box-shadow er tilstrekkelig effektivt og føles mye mykere, bortsett fra i Safari-der det er festing til hel-verdier ved overgangen som border og omriss.

Pseudo-Elementer

Flere av disse teknikkene kan bli endret for å bruke en pseudo-element i stedet, men pseudo-elementer endte opp med å forårsake noen ekstra ytelse i mine tester.

For box-shadow-metoden, overgangen noen ganger utløst maling i et mye større område enn nødvendig. Reinier Kaper påpekt at en pseudo-element kan hjelpe deg med å isolere maling til en mer bestemt område. Så jeg kjørte videre tester, box-shadow var ikke lenger forårsaker maling i store deler av dokumentet og den komplikasjon av pseudo-element endte opp med å bli mindre effektivt. Endringen i maling og ytelse kan ha vært på grunn av en Chrome-oppdatering, så føl deg fri til å teste selv.

Jeg kunne heller ikke finne en måte å utnytte pseudo-elementer på en måte som ville gjøre det mulig for transformere basert animasjon.

Hvorfor ikke forvandle: skalaen?

Du kan skyte opp til hjelpsomt anbefaler deg å bruke forvandle: skala for dette. Siden forvandle og tetthet er den beste stilen egenskaper for å animere for ytelse, hvorfor ikke bruke en pseudo-element og har grensen skalere opp og ned?

.border-knappen {
position: relative;
margin: 0.5 em;
border: solid 5px transparent;
bakgrunn: #3E4377;
}

.border-knappen:etter {
innhold: “;
display: block;
position: absolute;
øverst: 0; høyre: 0; nederst: 0; left: 0;
border: solid 10px #FC5185;
marg: -15 piksler;
z-index: -1;
overgang: forvandle 0.6 s lineær;
forvandle: skala(0.97, 0.93);
}

.border-knappen:hover::etter { forvandle: skala(1,1); }

Det er et par problemer:

  1. Grensen vil vise gjennom en gjennomsiktig knapp. Jeg tvunget bakgrunn på-knappen for å vise hvor grensen gjemmer seg bak knappen. Hvis design samtaler for knapper med en full bakgrunnen, da dette kunne fungere.
  2. Du kan ikke skalere grensen til bestemte størrelser. Siden knappen dimensjonene varierer med tekst, det er ingen måte å animere grensen fra nøyaktig 5px å 10px bare ved hjelp CSS. I dette eksempelet jeg har gjort noen magic-tall på skalaen for å få den til å dukke opp, men det vil ikke være universelle.
  3. Grensen animerer ujevnt fordi knappen er bildeformatet ikke er 1:1. Dette betyr vanligvis at venstre/høyre vil virke større enn den øverst/nederst til animasjonen er ferdig. Dette kan ikke være et problem avhengig av hvor raskt overgangen er, knappen er sideforhold, og hvor stor din grensen er.

Hvis knappen har satt som mål, Cher pekte ut en smart måte å beregne eksakt skalaer er nødvendig, selv om det kan være underlagt noen avrundingsfeil.

Utover CSS

Hvis vi løsne våre regler litt, det er mange interessante måter du kan animere grenser. Codrops konsekvent gjør fremragende arbeid i dette området, vanligvis ved å utnytte SVGs og JavaScript. Sluttresultatet er svært tilfredsstillende, selv om de kan være litt komplisert å implementere. Her er et par verdt å sjekke ut:

  • Kreative Knappene
  • Knappen Stiler Inspirasjon
  • Animerte Rutene
  • Forvrengt Knappen Effekter
  • Fremgang Knappen Stiler

Konklusjon

Det er mer til grenser enn bare grensen, men hvis du ønsker å animere en kant du kan ha noen problemer. Metodene som er beskrevet her vil hjelpe, selv om ingen av dem er en perfekt løsning. Som du velger, vil avhenge av prosjektets krav, så jeg har lagt ut en sammenligning tabell for å hjelpe deg å avgjøre.

Min anbefaling vil være å bruke box-shadow, som har den beste samlede balanse av lette-av-implementering, animasjon effekt, ytelse og nettleser støtter.

Har du en annen måte å skape en animert grensen? Kanskje en smart måte å utnytte forvandler for å flytte grensen? Kommentar nedenfor eller nå meg på å dele din løsning på utfordringen.

En spesiell takk til Martin Pitt, Steve Gardner, Cher, Reinier Kaper, Joseph Rex, David Khourshid, og Animasjonen på Jobb samfunnet.

SHARE
Previous articleAnimera Gränsen
Next articleAnimieren Grenze