Vypnutí nabídek pomocí animace s CSS

Feb 2, 2026

jak

Je to přes animaci, že děláme smysl pro svět: dveře se swing otevírají, auta řídit do svých destinací, rty kroutí do úsměvu. Dokonce i věci, které se cítí okamžitě, jako blesk zarážející nebo upustí telefon na tváři při použití v posteli, se děje v průběhu času. Je to přes tento pohyb, který chápeme, jak se objekty vztahují a fungují; pokud jsou lehké nebo těžké, tuhé nebo volné, připojené nebo oddělené, lepkavé nebo kluzké.

Na webu jsme však zvykli na věci, které se objevují a mizí v mrknutí oka. Klikujeme na odkaz a vše změny. Je to jako být veden do místnosti se zavázanýma očima, točit se kolem několika časů, a odstranění šátek, aby se v okolí bere. Ani nevíte, které dveře jste vstoupili. To je a velký, jak je postavena většina stránek. Můžeme to udělat lépe.

Při učení o potenciálu CSS Animace , Může být snadné nechat naše představy jít do hyperdrive a posypeme animace o všem. Zatímco animace může být skvělá, musíme být opatrní a vždy se zeptejte se: Je tato animace smysluplná? Přidává jinou hodnotu, než je krásná? Je to pro náš výrobek snadněji používat?

Smysluplná animace

This is the starting point for the tutorial – the sample menu that we’ll reveal with an animation — Toto je výchozí bod pro tutoriál - ukázkové menu, které odhalíme s animací

V tomto článku pracujeme společným UI Design. Prvek: přepínač menu. Budeme vytvářet menu (a ikonu, kterou chcete s ním) s CSS, a učinit to oživit s animacemi. Ujistíme se, že animace jsou smysluplné, ale také aplikovat nejlepší postupy výkonu webu, aby bylo zajištěno, že jsou tak hladké.

Můžeš Náhled výsledku konce zde . Když uživatel klikne na ikonu nabídky, rozbalíme štítku pozadí ikony (kruh) pro zakrytí obrazovky a předložte překrytí nabídky.

Spíše než jen blikat na zavřenou ikonu, budeme animovat a morph tři vertikální čáry (které tvoří ikonu menu) do 'x', reprezentovat zavřenou ikonu. Jinými slovy, protože menu je odhaleno ikonové morfy do tlačítka Zavřít.

Související prvky

Mohl bys přemýšlet, takže je to smysluplná animace? Dobrá otázka. Krátká odpověď: Ano! Delší odpověď: Animace jsou skvělé na spojovacích prvcích na obrazovce a ukazovat, jak se navzájem vztahují.

Vzhledem k tomu, že se zmenšeme na pozadí menu, aby se stala menu, ukazujeme, jak jsou dva připojeni - podobně jako ikona aplikace, když je stisknuto na IOS nebo Android, váhy nahoru a přebírá obrazovku, ukazovat, že aplikace byla spuštěna Ta ikona. Naše ikona menu není jen přepínat menu: je to menu, jen se zhroutil.

Podobně, stejně jako to, jak zapnout / vypnout přepínač transformuje mezi jeho zapnout a vypnout stav, když stisknete-li na iOS, naši nabídku přepínání se změní mezi ikonou menu a zavřenou ikonou v závislosti na tom, zda je menu našich stránek viditelné nebo skryté. To pomáhá prosazovat myšlenku, že dvě ikony fungují podobnými způsoby: Oba ovládají menu.

Takže když děláme naše místo zábavné používání, také usnadňujeme porozumět a zlepšování uživatelská zkušenost tak mírně.

Podívejte se, jak to provést v aplikaci Video Tutorial výše a písemné kroky níže.

01. ZAČÁTEK.

By drawing the menu icon with CSS (and no images), we can easily animate it later — Vykreslením ikony menu pomocí CSS (a bez obrázků), můžeme to snadno oživit později

Stáhněte soubory projektu . Otevřít index.html. V prohlížeči a měli byste vidět tři velké odkazy proti bílému pozadí. Toto je překrytí menu, které odhalíme.

Nejdříve to musíme skrýt. v styles.css. Přidejte tyto styly .menu-Overlay. :

 Opacita: 0;
Viditelnost: Skrytá;

S překryvným pryč, by se tlačítko mělo zobrazit v levém horním rohu. Nakresleme zde naši ikonu menu, takže je tu něco, co chcete kliknout na překrytí. Aby bylo snadné animovat, nakresleme to pomocí JUST HTML a CSS; Žádné bitmapy nebo vektory. Už jsme dostali nějaké HTML index.html. Pro menu: Kontejner ( .Jídelní lístek ), pozadí (pozadí ( .men-Circle. ), odkaz ( .men-link. ) a ikona (ikona ( .menu-ikona ) s jedním rozpětím pro každý řádek.

S odděleným divák Pro pozadí je poněkud nekonvenční přístup. Kdybychom nebyli do tohoto kruhu přidat animace, nepotřebujeme samostatný divák ; mohli bychom přidat hraniční poloměr a barvu pozadí na naše Menu-link. .

Chceme však být zdarma používat přeměnit Nemovitosti na kruhu, takže můžeme měnit bez ovlivnění samotné ikony, takže musíme oddělit pozadí z ikony.

Začněme kreslení řádků, které tvoří ikonu. Co mají všichni společné? Jsou stejně široké, mají zaokrouhlené rohy, jsou naprosto umístěny a mají barvu pozadí. Protože všechny řádky sdílí menu-line Třída, pojďme jej použít k nastavení těchto sdílených vlastností:

 .Menu-line {
 Barva pozadí: # 333;
 Výška: 2px;
 šířka: 100%;
 okruh pohraničí: 2px;
 Pozice: absolutní;
 vlevo: 0;
}

Pak můžeme použít jedinečné třídy řádků pro nastavení vertikální polohy:

 .men-line-1 {top: 0; }

.menu-line-2 {
 top: 0;
 Dno: 0;
 Marže: Auto;
}

.men-line-3 {dno: 0; }

02. Přidejte efekt vzniku

To make the menu appear clickable, we inflate the background plate on hover — Chcete-li zobrazit menu klepnutím na tlačítko, nafoukneme pozadí na pozadí

Udělejme ikonu jasně kliknutou přidáním vzniku efektu. v styles.css. , vytvořte nový volič menu-kruh Chcete-li ji měnit, když se přejdete v nabídce:

 .menu: Hover .Menu-Circle {transformace: měřítko (1.4); }

Nyní můžeme přidat naši první animaci. Přidat "Přechod: Všechna 0,2s snadnost-in-out" na .men-circle {} (ne na stav vznášek). Říkáme prohlížeči animovat všechny vlastnosti, které se mohou změnit .men-Circle. . Takže když to změníme na vznášející se, animuje v průběhu 0,2 sekundy do nového stavu, s časovací funkcí lehkomyslný .

Jak víte, která funkce načasování si vybrat? Nejdříve se nepoužívejte pomocí lineární funkce časování. Několik věcí v reálném světě se pohybuje dokonale konstantní rychlostí, takže objekty animované s lineární funkcí načasování mají tendenci vypadat nepřirozené a tuhé (protože Einstein by řekl: "Bůh nehraje kostky s lineární funkcí načasování").

Jako pravidlo palce, uvolnění funguje skvěle pro prezentaci nových objektů a snadnost Pracuje skvěle pro odstranění objektů. A v pochybnostech, lehkomyslný Je funkce pevné časování na výchozí hodnotu: má pomalý začátek a pomalý konec, vytváří hladkou animaci tekutin.

03. Zobrazit a skrýt menu

Pojďme použít jQuery ukázat a skrýt naše nově vytvořené překrytí. v script.js. , přepínat třídu otevřeno na .menu-Overlay. Uvnitř stávajícího popisovače kliknutí:

$ (". menu-překrytí"). toggleclass ("otevřeno");

Pak zobrazte překrytí, když má třídu otevřených:

 .men-překrytí.Open {
 Opacita: 1;
 Viditelnost: viditelné;
}

04. Připojte ikonu nabídky

Přechod, který jsme přidali dřívější znamená, že už máme úhledný efekt fade, když se zobrazí, když ukážeme a skryjete překrytí. Můžeme však udělat, že vypadají jako ikona menu pozadí se stává překryvným menu a lépe připojit dva vizuálně.

Dosažení tohoto efektu je jednodušší než se zdá být: vše, co musíme udělat, je rychle zvětšit kruh menu, když je kliknut. Overlay bude v současné době vyblednout, vytváří iluzi, že ikona nabídky transformuje do překrytí.

Musíme být schopni ve stylu menu kruhu, když je nabídka kliknut. Otevřít script.js. a uvnitř naší existující funkce kliknutí přepnutí třídy otevřené pro naše .Jídelní lístek :

$ (". menu"). toggleclass ("otevřeno");

Nyní se můžeme zaměřit na tuto třídu s CSS a rozšiřovat kruh, jak je menu otevřeno. Na samém dně Style.css. , rozšířit .men-Circle. když .Jídelní lístek má také třídu .otevřeno :

 .menu.Open .Menu-Circle {transformace: měřítko (60);
}

05. Změňte ikonu

The white circle expands to become the menu background, and the icon morphs into an 'X' — Bílý kruh se rozšiřuje, aby se stal pozadím menu a ikona morfy do 'x'

Máme krásný odhalený efekt pro naše menu, ale jak otočíme ikonu menu do zavřené ikony? Je překvapivě snadné, jakmile víte, jak - budeme muset nastavit tři vlastnosti CSS. Za prvé, musíme skrýt středový řádek během zobrazení menu:

 .Menu.Open .Menu-line-2 {Opacity: 0; }

Pak vše, co musíme udělat, je překlopit další dvě čáry 45 stupňů v opačných směrech (řádky musí ukázat v různých směrech, aby se vytvořily 'X', takže si uvědomte, jak má jeden z řádků negativní rotaci 45 stupňů):

 .MENU.OPEN .MENU-LINE-1 {
 transformace: otočení (-45deg);
}

.menu.Open .Menu-line-3 {
 transformovat: otočit (45deg);
}

Dobře, druh. Musíme také vycentrovat tyto dva řádky vertikálně. V tomto okamžiku můžete přemýšlet "snadné! Musíme jen změnit horní a dno polohu, aby je vyzdušnil '. A měl bys správný - pokud jsme tuto ikonu nenastali.

Vzhledem k tomu, že můžeme dosáhnout pouze hardwarově akcelerovaných animací omezením sebe na animaci přeměnit a neprůhlednost Vlastnosti, budeme muset uchýlit k soustředění linek prostřednictvím transformací.

 .MENU.OPEN .MENU-LINE-1 {
 Transformace: Translatey (7px) Translatey (-50%) Otočit (-45deg);
}

.menu.Open .Menu-line-3 {
 Transformace: Translatey (-7px) Translatey (50%) Otočte (45deg);
}

Tyto transformace budou pohybovat oběma řádky, takže jsou vertikálně vycentrovány v nádobě ikony, a pak je otáčejí, aby vytvořily kříž.

Pojďme to rozbít. Současně využíváme dva překlady: Translatey (7px) a Translatey (-50%) . První transformace, Translatey (7px) , se používá k pohybu horní hrany linky do vertikálního centra plátna. Matematika zde je jednoduchá: 14 je výška naší ikony, tím, že se dělíme o dva dostaneme střední bod: 7.

Druhá transformace, Translatey (-50%) , se používá k pohybu čáry tak, aby svislé středisko linky, nikoli jeho horní hranu, sídlí na vertikálním středovém bodu plátna.

Obvykle při použití % Přihlásit se CSS Odkazujete na rodič prvku (nastavení Šířka: 100% odpovídá šířce prvku k jeho rodiči), ale pokud používáte procenta s vlastností transformace, odkazujete se na samotný prvek, nikoli rodič. Takže pro nás najít výšku linky a pohybovat se nahoru o polovinu, vše, co potřebujeme, je Translatey (-50%) .

06. Morph mezi ikonami

Místo toho, aby jen nahradil ikonu menu s ikonou Zavřít, pojďme morph mezi oběma státy.

Začněte přidáním přechodu na .men-line. v Style.css. :

 Přechod: Všechna 0,25s Snadno-in-out;

Ta-da! Ikona menu morfování. Animace je však trochu nudná. Pojďme to opravit. Aby se čáry vypadaly živější, můžeme je otočit jak dalších 90 stupňů. Ikona bude na konci vypadat stejně, ale řádky budou po celé časové období dále cestovat. Změnit rotace Otočit (-135deg) a Otočit (135deg) .

Jako pravidlo, můžete vždy zlepšit animaci pomocí vlastní křivky Bézier, která je lépe přizpůsobena vaší animaci. V současné době používáme lehkomyslný - To znamená, že animace bude mít pomalý start a konec, s rychlejším tempem uprostřed.

Myslím, že je pro naši ikonu montáž více pružinového efektu. Udělejme to rychle, s malým efektem odrazu, jak jde o konec. Pro .men-line. , nahradit " Snadné in-out " S vlastní křivkou Bézier:

 Přechod: Všechny 0,25s kubic-Bezier (0,175, 0,885, 0,32, 1.275);

Jaké jsou tato čísla? Nebojte se: Bézier křivky jsou zřídka napsány ručně. Používáš Cubic-Bezier () Definovat tempo animace v čase a spíše než je psát sami, doporučuji použít referenční místo. To pochází z Uningings.net. To překročí na konci animace a vytváří jemný efekt odrazu.

Zatímco jsme na tom, jdi Uningings.net. a chytit kód Symbol ouOSEXPO. . Použijeme to k vytvoření rafinovaného efektu pro animaci pozadí menu. Aktualizovat přechod .men-Circle. Chcete-li použít tuto vlastní křivku Bézier a učinit animaci o něco déle (0,5s):

 Přechod: Všech 0,5s kubic-Bezier (0,19, 1, 0,22, 1);

Gratulujeme, vytvořili jste sadu animací, které jsou smysluplné: pomáhají vám porozumět tomu, co se děje na místě, když ho naviguje, vytváří pocit prostorového povědomí. Kromě toho animace běží hladce.

Pouze animováním vlastností transformace a opacity se můžeme ujistit, že podpora hardwarové akcelerace prohlížeče může kopnout a vyhnout se zbytečnému zpoždění. Při hraní s animacemi se ujistěte, že zaškrtnete tyto dvě krabice: Udělejte je smysluplné a krásné.

Tento článek se původně objevil Čistý časopis Vydání 281. Přihlásit se k odběru netto .

Související články:

10 Působivé příklady animace CSS3
28 Nesplacené příklady CSS
Začněte s webovou dostupností

Vypnutí nabídek pomocí animace s CSS

Smysluplná animace

Související prvky

01. ZAČÁTEK.

02. Přidejte efekt vzniku

03. Zobrazit a skrýt menu

04. Připojte ikonu nabídky

05. Změňte ikonu

06. Morph mezi ikonami

jak - Nejoblíbenější články

Použijte nástroj pero a textury pro přidání hloubky v aplikaci Photoshop

Afinitní návrhář: Jak používat omezení

Jak malovat realistické vlny ve Photoshopu

Jak vytvořit chatbotové rozhraní

Vytvořte postavu se silným pozice ve Photoshopu

Jak zvolit správný prototypový nástroj

Textura Autenticky opotřebovaná K-2SO droid

Boost D3.JS grafy se SVG gradienty

Kategorie