A CSS átmenetek magyarázata

Az összetevők animálásának legegyszerűbb (és legegyszerűbb) módja a CSS Transitions. Ebben a cikkben megtudhatja, hogyan működnek a CSS-átmenetek, és hogyan lehet animációkat készíteni vele.

Átmenet akkor következik be, amikor egy CSS tulajdonság egy idő alatt egyik értékről a másikra változik.

CSS-átmeneteket hozhat létre a transitiontulajdonsággal:

.selector { transition: property duration transition-timing-function delay; }

Az transitioningatlan egy rövidített négy CSS tulajdonságok transition-property, transition-duration, transition-timing-function, transition-delay.

.selector { transition-property: property; transition-duration: duration; transition-timing-function: timing-function; transition-delay: delay /* The transition property is the shorthand for the above four properties */ transition: property duration timing-function delay; }

transition-propertyaz átállítani kívánt CSS tulajdonságra utal. transitionGyorsírásban kötelező .

transition-durationaz átmenet időtartamára utal. Meddig szeretné tartani az átállást? Ezt az értéket másodpercek alatt írjuk le az sutótaggal (like 3s). transitionGyorsírásban is szükséges .

transition-timing-functionutal arra, hogyan történik az átmenet. Később többet megtud erről.

transition-delayarra utal, hogy meddig kell várni az időtartam megkezdése előtt. Ezt az értéket másodpercek alatt írjuk le az sutótaggal (like 3s). gyorsírásban transition-delaynem kötelező transition.

Kiváltó átmenetek

Közvetlenül kiválthatja a CSS átmenetet olyan álosztályokkal, mint :hover(aktiválódik, amikor az egér áthalad egy elem felett), :focus(akkor aktiválódik, amikor a felhasználó rákattint egy elemre, vagy amikor a felhasználó rákattint egy bemeneti elemre), vagy :active(akkor aktiválódik, amikor a felhasználó rákattint az elemre ).

/* creating transitions directly in CSS */ .button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button:hover { background-color: #1ce; }

Osztály hozzáadásával vagy eltávolításával kiválthatja a CSS-átmeneteket a JavaScript segítségével is.

/* CSS */ .button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button.is-active { color: #1ce; } // JavaScript const button = document.querySelector('.button') button.addEventListener('click', _ => button.classList.toggle('is-active'))

Az átmenet-időzítés-függvény megértése

Az transition-timing-functionátmenet miként szabályozza. Az összes átmenet linearalapértelmezett értéke , ami azt jelenti, hogy a tulajdonság az átmenet végéig egyenletesen változik.

.selector { transition: transform 1s linear; /* OR */ transition-property: transform; transition-duration: 1s; transition-timing-function: linear; }

A helyzet az, hogy kevés dolog mozog lineárisan az életben. A valós tárgyak nem így mozognak. Néha felgyorsulunk; néha lassulunk. Ez transition-timing-functionlehetővé teszi mindezek rögzítését.

Képzelje el, hogy egy teniszlabdát dob ​​egy nyílt pályára. A labda a maximális sebességgel hagyja el a kezét. Mozgás közben elveszíti az energiát, lassul és végül megtorpan. Ezt hívják ease-out. Van rá időzítési funkció.

.selector { transition-timing-function: ease-out; }

Most képzelje el, hogy autóban ül. Most nem mozog. Amikor elmozdítja az autót, az felgyorsul és a maximális sebessége felé halad. Ezt hívják ease-in. Van rá időzítési funkció is.

.selector { transition-timing-function: ease-in; }

Mivel van ease-inés ease-outvan még egy időzítő funkció, amely egyesíti a két együttes, ease-in-out. (Azt tanácsolom, hogy ne használja ease-in-outaz átmenetet, hacsak az átmenet nem tart tovább, mint egy másodperc. Semmi sem enyhül be és ki egy másodpercen belül. Egyszerűen furcsának tűnik.)

.selector { transition-timing-function: ease-in-out; }

Az eddig tanult időzítési funkciók bemutatásához lásd ezt a tollat:

Végül, ha a fenti lehetőségek egyike sem tetszik, akkor létrehozhatja saját időzítési funkcióját cubic-bezier.

Saját időzítési funkció létrehozása köbmezővel

A köbös bezier négy értékből áll, amelyek meghatározzák az átmenet-időzítés funkciót. Ez így néz ki:

.selector { transition-timing-function: cubic-bezier(x1, y1, x2, y2); }

Ne aggódj a x1, y1,, x2és y2. Soha nem hozhat létre köbös-bezier görbéket azzal, hogy maga írja be a számokat (hacsak nem tudja már, mit jelentenek, és a tökéletesség érdekében módosítja az időzítési funkciót).

A görbék létrehozásában a Chrome és a Firefox megbízható fejlesztői eszközeire egyaránt támaszkodhat. Használatához adjon hozzá egy transition-timing-functionelemet egy elemhez, majd nyissa meg a devtoolokat és kattintson az időzítési funkcióra.

Lásd: Zell Liew (@zellwk) Pen CSS Transition Timing Functions funkciója a CodePen-en.

A mai cikk nem foglalkozik azzal, hogy elmélyülten készítsen animációihoz saját bezier görbéket. Ha érdekli, a köbös-bezier görbékről további információt talál Stephen Greig „A CSS időzítési funkcióinak megértése” című cikkében.

Két vagy több tulajdonság áttérése

Két (vagy több) CSS tulajdonságot átállíthat, ha elválasztja őket vesszővel a transitionvagy a transition-propertytulajdonságban.

Ugyanezt megteheti az időtartammal, az időzítési funkciókkal és a késésekkel is. Ha az értékek megegyeznek, akkor csak egyet kell megadnia.

.selector { transition: background-color 1s ease-out, color 1s ease-out; /* OR */ transition-property: background, color; transition-duration: 1s; transition-timing-function: ease-out; }

Kísértésbe eshet, hogy minden CSS-tulajdonságot áttér all. Soha ne csináld ezt. Ez rossz a teljesítmény szempontjából. Mindig adja meg az átállni kívánt tulajdonságot.

/* DON'T EVER DO THIS */ .selector { transition-property: all; } /* ALWAYS DO THIS */ .selector { transition-property: background-color, color, transform; }

Átváltás vs kilépés

Előfordul, hogy azt szeretné, hogy a tulajdonságok eltérő módon lépjenek be és ki. Azt szeretné, ha az időtartam, az időzítés-függvény vagy a késés eltérő lenne.

Ehhez írjon egy másik transition-tulajdonságkészletet.

.button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button:hover { background-color: #1ce; transition-duration: 2s; }

When you write transition properties in the triggering (pseudo) class, the transition properties in the triggering class overwrites the original transition properties you’ve stated in the base class.

So, in the example above, when you hover on the button, the background color takes 2 seconds to change from #33ae74 to #1ce.

When you hover out from the button, the background color only takes 0.5s to change back to #1ce because the transition-duration of 2s no longer exists.

Wrapping up

CSS Transitions are the easiest way to perform animations. You can create transitions either with the transition shorthand or with transition- properties.

To create a transition, you overwrite a property in a class (or psuedo class), and you specify the property to transit in transition or transition-property.

Remember to change your transition-timing-function so your animation looks more real!

If you loved this article, you’ll love learn Learn JavaScript — a course that helps you learn to build real components from scratch with JavaScript.

(Oh, by the way, if you liked this article, I’d appreciate it if you could share it. )

Originally published at zellwk.com.