De Staat van Wijzigen is Verlopen met CSS Transities en Animaties

0
49

Terug in 2012, wordt in Internet Explorer 10 uit kwam en, onder andere, het uiteindelijk ondersteund CSS gradients en, in aanvulling op dat, de mogelijkheid om beziel hen met CSS! Geen enkele browser ondersteund dit op het moment, maar ik was hoopvol voor de toekomst.

Helaas, zes jaar verder en er is niets veranderd in deze afdeling. Edge ondersteunt animeren verlopen met CSS, net zoals IE 10 toen, maar geen andere browser heeft ondersteuning toegevoegd voor deze. En terwijl het animeren background-size of achtergrond-positie of de dekking of de rotatie van een pseudo-element lagen op de top, kan ons een lange weg afgelegd in de termen van het bereiken van coole effecten, deze oplossingen zijn nog beperkt.

Er zijn effecten die we niet kunnen reproduceren zonder toevoeging van veel extra elementen of veel extra verlopen, zoals “de blinds effect” hieronder te zien is.

De blinds effect (live demo, Edge/ IE 10+).

In de Rand, aan de boven-effect wordt bereikt met een keyframe animatie:

html {
background: linear-gradient(90deg, #f90 0%, #444 0) 50%/ 5em;
animatie: blinds 1s gemak-in-out oneindige plaatsvervanger;
}

@keyframes blinds {
{
background-image: linear-gradient(90deg, #f90 100%, #444 0);
}
}

Als dat lijkt NATTE, kunnen we DROOG het met een touch van Sass:

@functie blinds($open: 0) {
@return linear-gradient(90deg, #f90 $open*100%, #444 0);
}

html {
achtergrond: de blinds() 50%/ 5em;
animatie: blinds 1s gemak-in-out oneindige plaatsvervanger;
}

@keyframes blinds {{ background-image: blinds(1) } }

Terwijl we de code die we schrijven en wat we nodig hebben om te bewerken later veel meer onderhoudbaar, we hebben nog steeds de herhaling in de gecompileerde CSS en we zijn beperkt door het feit dat we alleen kunnen animeren tussen stopt met hetzelfde toestel — tijdens het animeren van 0% tot 100% werkt, probeert te gebruiken, 0 of 0px in plaats van 0% resulteert in geen animatie gebeurt meer. Niet te vergeten dat Chrome en Firefox gewoon flip van oranje tot grijs met geen stop positie animatie!

Gelukkig, deze dagen hebben we een nog betere optie: CSS variabelen!

Recht uit de doos, CSS variabelen zijn niet animatable, maar we kunnen krijgen overgang (maar niet de animatie!) effecten als de woning die we gebruiken ze voor is animatable. Bijvoorbeeld, wanneer gebruikt in een transformatie van de functie, kunnen we de overgang van de transformatie van de goederen.

Laten we het voorbeeld van een vak dat wordt verschoven en samengeperst als een selectievakje is ingeschakeld. Op dit vak hebben we een transformatie die afhankelijk is van een factor –f, dat in eerste instantie 1:

.box {
/* basic stijlen zoals afmetingen en achtergrond */
–f: 1;
transformeren: translate(calc((1 – var(–f))*100vw)) scalex(var(–f));
}

Wanneer het selectievakje is :ingeschakeld, veranderen we de waarde van de CSS variabele –f .5:

:gecontroleerd ~ .box { –f: .5 }

Het instellen van een overgang op .box maakt het soepel van de ene staat naar de andere:

.box {
/* stijlen als voorheen */
overgang: de transformatie .3s gemak-in;
}

Merk op dat dit niet echt werkt in de huidige versie van de Rand door deze bug.

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Echter, CSS gradients zijn achtergrond afbeeldingen, die alleen animatable in de Rand en in de IE 10+. Dus, terwijl we kunnen dingen makkelijker te maken voor onszelf en het verminderen van de hoeveelheid van de gegenereerde CSS transities (zoals te zien is in de onderstaande code), zijn we nog steeds geen vooruitgang boeken in termen van het uitbreiden van de ondersteuning.

.blinds {
background: linear-gradient(90deg, #f90 (var pos–, 0%), #444 0) 50%/ 5em;
overgang: .3s gemak-in-out;

:gecontroleerd ~ & { –pos: 100%; }
}

Open/sluiten blinds op het controleren/vinkje in het selectievakje (live demo, Edge).

Voer Houdini, die ons in staat stelt om te registreren aangepaste eigenschappen en vervolgens te animeren. Op dit moment wordt alleen ondersteund door Knipperen browsers achter de Experimentele Web Platform is voorzien van een vlag, maar het is nog steeds het uitbreiden van de ondersteuning een beetje van de Rand staan.

De Experimentele Web-Platform functies vlag ingeschakeld in Chrome.

Terug naar ons voorbeeld, wij registreren het –pos aangepaste eigenschap:

CSS.registerProperty({
naam: ‘–pos’,
syntaxis: ‘<lengte-percentage>’,
initialValue: ‘0%’
});

Merk op dat <lengte-percentage> betekent dat het aanvaardt niet alleen de lengte en het percentage waarden, maar ook calc() combinaties daarvan. Door contrast, <length> | <percentage> accepteert lengte en percentage waarden, maar niet calc() combinaties daarvan.

Echter, om dit te doen maakt geen verschil in Chrome, zelfs met de vlag ingeschakeld, waarschijnlijk omdat, in het geval van overgangen, wat wordt er overgestapt wordt van de goederen waarvan de waarde afhankelijk is van de CSS-variabele en niet de CSS variabele zelf. En aangezien we over het algemeen niet overgang tussen twee achtergrond afbeeldingen in Chrome in het algemeen, dit mislukt.

Het werkt in de Rand, maar het werkte in de Rand, zelfs zonder het registreren van de –pos variabele omdat Edge stelt ons in staat om de overgang tussen gradiënten in het algemeen.

Wat werkt in Blink browsers met de vlag ingeschakeld is het hebben van een animatie in plaats van een overgang.

html {
background: linear-gradient(90deg, #f90 (var pos–, 0%), #444 0) 50%/ 5em;
animatie: de blinds .85s gemak-in-out oneindige plaatsvervanger;
}

@keyframes blinds {{ –pos: 100%; } }

Echter, dit is nu niet werken in de Rand meer omdat, terwijl de Rand van een animatie te maken tussen gradient achtergrond, het kan niet hetzelfde doen voor aangepaste eigenschappen.

Dus we moeten een alternatieve benadering voor de Rand. Dit is waar @ondersteunt handig, omdat alles wat we hebben te doen is controleren of een ms – voorafgegaan eigenschap wordt ondersteund.

@functie grad($pos: 100%) {
@return linear-gradient(90deg, #f90 $pos, #444 0);
}

html{
/* hetzelfde als voorheen */

@ondersteunt (-ms-user-select: none) {
background-image: grad(0%);
animatie-naam: rolgordijnen-alt;
}
}

@keyframes blinds-alt {{ background-image: grad() } }

Stop posities zijn niet het enige wat we kunnen animeren op deze manier. Kunnen We hetzelfde doen voor de hellingshoek. Het idee erachter is vrij veel het zelfde, behalve dat het nu onze animatie is niet een afwisselend een meer en we gebruiken een easeInOutBack aard van de functie van de timing.

@functie grad($ang: 1turn) {
@return linear-gradient($ang, #f90 50%, #444 0);
}

html {
achtergrond: grad(var(–ang, 0deg));
animatie: rot 2s kubieke bezier(.68, -.57, .26, 1.65) oneindig;

@ondersteunt (-ms-user-select: none) {
background-image: grad(0turn);
animatie-naam: rot-alt;
}
}

@keyframes rot {{ –ang: 1turn; } }

@keyframes rot-alt {{ background-image: grad(); } }

Vergeet niet dat, net als in het geval van posities stoppen, kunnen we de animatie alleen tussen gradiënt hoeken uitgedrukt in dezelfde eenheid in de Rand, dus bellen naar onze Sass functie met grad(0deg) in plaats van grad(0turn) werkt niet.

En, natuurlijk, de CSS variabele die we nu gebruiken, accepteert hoek waarden in plaats van lengtes en percentages:

CSS.registerProperty({
naam: ‘–ang’,
syntaxis: ‘<hoek>’,
initialValue: ‘0deg’
});

Prachtig rond (live demo, Blink browsers met vlag en Edge).

Op een vergelijkbare manier kunnen we ook animeren radiale verlopen. En het leuke aan de CSS variabele benadering is dat het ons in staat stelt te animeren van de verschillende componenten van het verloop anders is, iets dat niet mogelijk is in de animatie verlopen als geheel de weg van de Rand (dat is de reden waarom de volgende demo ‘ s niet goed werken in de Rand).

Laten we zeggen dat we de volgende radiaal verloop():

$p: 9%;

html {
–x: #{$p};
–y: #{$p};
achtergrond: radiaal verloop(cirkel op var(–x) var(–y), #f90, #444 $p);
}

Wij registreren het –x –y-variabelen:

CSS.registerProperty({
naam: ‘–x’,
syntaxis: ‘<lengte-percentage>’,
initialValue: ‘0%’
});

CSS.registerProperty({
naam: ‘–y’,
syntaxis: ‘<lengte-percentage>’,
initialValue: ‘0%’
});

Dan voegen we de animaties:

html {
/* hetzelfde als voorheen */
animatie: een 0s gemak-in-out -2.3 s alternatieve oneindig;
animatie-naam: x, y;
animatie-duur: 4.1 s, 2.9 s;
}

@keyframes x {{ –x: #{100% – $p} } }
@keyframes y {{ –y: #{100% – $p} } }

Het resultaat dat we krijgen is hieronder te zien:

Bewegend licht (live demo, Blink browsers met vlag).

We kunnen gebruik maken van deze techniek van het animeren van de verschillende aangepaste eigenschappen die we gebruiken binnen de gradient functie om de blinds in ons eerste voorbeeld sluit de andere kant op in plaats van terug te gaan. Om dit te doen, introduceren we twee CSS-variabelen, –c0 en c1:

$c: #f90 #444;

html {
–c0: #{ne($c, 1)};
–c1: #{ne($c, 2)};
background: linear-gradient(90deg, var(–c0) var(–pos, 0%), var(–c1) 0) 50%/ 5em;
}

Wij registreren al deze aangepaste eigenschappen:

CSS.registerProperty({
naam: ‘–pos’,
syntaxis: ‘<lengte-percentage>’,
initialValue: ‘0%’
});

CSS.registerProperty({
naam: ‘–c0’,
syntaxis: ‘<kleur>’,
initialValue: ‘rood’
});

/ * –c1 */

We maken gebruik van dezelfde animatie als voor de positie van de eerste stop –pos en, in aanvulling op deze, introduceren we twee stappen() animaties voor de twee andere variabelen, schakelen hun waarden elke keer een herhaling van de eerste animatie (het veranderen van de waarde van –pos) is voltooid:

$t: 1s;

html {
/* hetzelfde als voorheen */
animatie: een 0s oneindig;
animatie-naam: c0, pos, c1;
animatie-duur: 2*$t $t;
animatie-timing-functie: de stappen(1), ease-in-out;
}

@keyframes pos {{ –pos: 100%; } }

@keyframes c0 { 50% { –c0: #{ne($c, 2)} } }
@keyframes c1 { 50% { –c1: #{ne($c, 1)} } }

En krijgen we het volgende resultaat:

Een andere versie van de blinds animatie (live demo, Blink browsers met vlag).

Ook kunnen We dit toepassen op een radiaal verloop() (niets, maar de achtergrond verklaring van wijzigingen):

achtergrond: radiaal verloop(cirkel, var(–c0) var(–pos, 0%), var(–c1) 0);

Groeiende schijven (live demo, Blink browsers met vlag).

Precies dezelfde tactiek werkt voor conic-gradient ():

achtergrond: conic-gradient(var(–c0) var(–pos, 0%), var(–c1) 0);

Groeiende segmenten (live demo, Blink browsers met vlag).

Het herhalen van gradiënten zijn ook een optie voor het maken van een rimpel-achtig effect in de radiale geval:

$p: 2em;

html {
/* hetzelfde als voorheen */
achtergrond: herhalen-radiaal verloop(cirkel,
var(–c0) 0 var(–pos, 0px), var(–c1) 0 $p);
}

@keyframes pos { 90%, 100% { –pos: #{$p} } }

Rimpelingen (live demo, Blink browsers met vlag).

En een helix/stralen effect in de kegelsnede geval:

$p: 5%;

html {
/* hetzelfde als voorheen */
achtergrond: herhalen-conisch-gradient(
var(–c0) 0 var(–pos, 0%), var(–c1) 0 $p);
}

@keyframes pos { 90%, 100% { –pos: #{$p} } }

Groeiende stralen (live demo, Blink browsers met vlag).

We kunnen ook het toevoegen van een andere CSS-variabele om dingen interessanter:

$n: 20;

html {
/* hetzelfde als voorheen */
achtergrond: radiaal verloop(cirkel op var(–o, 50% 50%),
var(–c0) var(–pos, 0%), var(–c1) 0);
animatie: een 0s oneindig;
animatie-naam: c0, o, pos, c1;
animatie-duur: 2*$t, $n*$t $t;
animatie-timing-functie: de stappen(1), stappen(1), ease-in-out;
}

@keyframes o {
@voor $ik van 0 naar $n {
#{$i*100%/$n} { –o: #{random(100)*1%} #{random(100)*1%} }
}
}

We moeten het registreren van deze variabele voor de hele zaak te werk:

CSS.registerProperty({
naam: de ‘- o’,
syntaxis: ‘<lengte-percentage>+’,
initialValue: ‘50%’
});

En dat is het! Het resultaat is hieronder te zien:

Willekeurig geplaatst groeiende schijven (live demo, Blink browsers met vlag).

Ik zou zeggen dat de toekomst van het veranderen van gradients met de keyframe-animaties ziet er best cool. Maar in de tussentijd, voor cross-browser-oplossingen, de JavaScript manier blijft de enige geldige.

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!