Forskjøvet CSS Overganger

0
12

La oss si at du ønsket å flytte et element på :hover for en morsom effekt.

@media (hold: hold) {
.listen–element {
overgang: 0.1 s;
forvandle: translateY(10px);
}
.listen–element:hover,
.listen–element:fokus {
forvandle: translateY(0);
}
}

Kul kul. Men hva hvis du hadde flere listeelementer, og du ville ha dem alle å gå på hold, men hver og en forskyvning med forskjøvet timing?

Trikset ligger i overgangen-forsinkelse og bruke en litt annen forsinkelse til hvert element. La oss velger hvert listepunkt individuelt og anvende ulike forsinkelser. I dette tilfellet vil vi velge en intern span bare for moro skyld.

@media (hold: hold) {
.listen li a span {
forvandle: translateY(100px);
overgang: 0.2 s;
}
.liste:hover span {
forvandle: translateY(0);
}
.listen li:nth-child(1) span {
overgangen-forsinkelse: 0.0 s;
}
.listen li:nth-child(2) span {
overgangen-forsinkelse: 0.05 s;
}
.listen li:nth-child(3) span {
overgangen-forsinkelse: 0.1 s;
}
.listen li:nth-child(4) span {
overgangen-forsinkelse: 0.15 s;
}
.listen li:nth-child(5) span {
overgangen-forsinkelse: 0.2 s;
}
.listen li:nth-child(6) span {
overgangen-forsinkelse: 0.25 s;
}
}

Se Penn
Forskjøvet Animasjoner av Chris Coyier (@chriscoyier)
på CodePen.

Hvis du ønsker å gi deg selv litt mer programmatisk kontroll, kan du sette den forsinkelsen som en egendefinert CSS-egenskapen:

@media (hold: hold) {
.listen {
–forsinkelse: 0.05 s;
}
.listen li a span {
forvandle: translateY(100px);
overgang: 0.2 s;
}
.liste:hover span {
forvandle: translateY(0);
}
.listen li:nth-child(1) span {
overgangen-forsinkelse: calc(var(–forsinkelse) * 0);
}
.listen li:nth-child(2) span {
overgangen-forsinkelse: calc(var(–forsinkelse) * 1);
}
.listen li:nth-child(3) span {
overgangen-forsinkelse: calc(var(–forsinkelse) * 2);
}
.listen li:nth-child(4) span {
overgangen-forsinkelse: calc(var(–forsinkelse) * 3);
}
.listen li:nth-child(5) span {
overgangen-forsinkelse: calc(var(–forsinkelse) * 4);
}
.listen li:nth-child(6) span {
overgangen-forsinkelse: calc(var(–forsinkelse) * 5);
}
}

Dette kan være litt pirkete for din smak. Si din lister begynner å vokse, kanskje til syv eller flere elementer. Den svimlende plutselig ikke fungerer på den nye fordi dette ikke høyde for at mange liste elementer.

Du kunne passere i forsinkelse fra HTML-koden hvis du ønsket:

<ul class=”list”>
<li><a href=”#0″ style=”–forsinkelse: 0.00 s;”>① <span>Dette</span></a></li>
<li><a href=”#0″ style=”–forsinkelse: 0.05 s;”>② <span>Lille</span></a></li>
<li><a href=”#0″ style=”–forsinkelse: 0.10 s;”>③ <span>Piggy</span></a></li>
<li><a href=”#0″ style=”–forsinkelse: 0.15 s;”>④ <span>Gikk</span></a></li>
<li><a href=”#0″ style=”–forsinkelse: 0.20 s;”>⑤ <span>Hvis</span></a></li>
<li><a href=”#0″ style=”–forsinkelse: 0.25 s;”>⑥ <span>Markedet</span></a></li>
</ul>
@media (hold: hold) {
.listen li a span {
forvandle: translateY(100px);
overgang: 0.2 s;
}
.liste:hover span {
forvandle: translateY(0);
overgangen-forsinkelse: var(–forsinkelse); /* kommer fra HTML */
}
}

Eller hvis du er Sass-tilbøyelig, kan du opprette en sløyfe med flere elementer enn du trenger i øyeblikket (å vite den ekstra koden vil gzip unna ganske effektivt):

@media (hold: hold) {

/* base hold stiler fra over */

@for $jeg fra 0 til 20 {
.listen li:nth-child(#{$i + 1}) span {
overgangen-forsinkelse: 0.05 s * $i;
}
}
}

Det kan være nyttig om du velger å sløyfe for mer enn du trenger.