Animace šířky elementu

4. 8. 2019 15:20:54

Ahoj,

už několik hodin jsem strávil nad tím, jak docílit toho, aby se mi automaticky animovalo zvětšování sekce. V případě, že mám například záložky, kliknu na tlačítko, abych vyvolal jednu z nich. Obsah vyvolané záložky je vyšší než obsah záložky předchozí, tím pádem se mi sekce, v níž se záložky nachází, zvětší na výšku. Děje se to ale skokově, avšak ne animovaně. To si můžeme povšimnout na sekci níže s růžovou barvou, která při zvětšení poskočí, místo plynulého přechodu.

Přikládám odkaz na beta verzi záložek, kterou jsem jen překopíroval na rychlo z webu.

Napadá někoho, jak docílit této animace? Zkoušel jsem aplikovat CSS transition na všechny elementy, ale nikde nic nepomáhá. Hledal jsem i na Google, ale nic jsem nenašel, asi špatná klíčová slova.

https://codepen.io/anon/pen/Xvebvq

Díky, Štěpán

4. 8. 2019 15:20:54

https://webtrh.cz/diskuse/animace-sirky-elementu/#reply1410905

(20 hodnocení)

4. 8. 2019 15:30:05

pres transition nejde animovat jasne nedefinovanou sirku/vysku :) musel bys presne nastavit velíkost. Castecne to jde obejit pres max-height, max-weight ale ta animace pak bude do nastavenyho max-height takze tam zase nejde presne nastavit dylku a prubeh ty animace.

A i tak k tomu co delas ty nakonec bude treba nejakej ten javascript :) Pres jquery, ktere tam stejne koukam pouzivas to pujde, ale nejsem si jistej jak jednoduchej kod to bude...

Rad byhc se plet, jestli nekdo vi jak to udelat pres cisty css...

4. 8. 2019 15:30:05

https://webtrh.cz/diskuse/animace-sirky-elementu/#reply1410904

smrtka

(3 hodnocení)

4. 8. 2019 16:09:36

Pres css zatim zadnou cestu nevidim (!= ze neni), ale s jQ to jde celkem jednoduse:

Jen je potreba pripadne pohlidat situaci, kdy v html nebude unikatni tabs__content

PS. jeste je potreba ten radek s nastavenim vysky zakomponovat do resize udalosti

4. 8. 2019 16:09:36

https://webtrh.cz/diskuse/animace-sirky-elementu/#reply1410903

StepanP

(12 hodnocení)

5. 8. 2019 22:42:19

Napsal smrtka;1538501
Pres css zatim zadnou cestu nevidim (!= ze neni), ale s jQ to jde celkem jednoduse:
// Tabs in product page $(document).ready(function(){ $('.tabs__content').height( $('.tabs__content .is-active').outerHeight() ); $('.tabs__nav ul li').click(function(){ var tab_id = $(this).attr('data-tab'); $('.tabs__nav ul li').removeClass('is-active'); $(this).addClass('is-active'); $("#"+tab_id).siblings().removeClass('is-active'); $("#"+tab_id).addClass('is-active'); $('.tabs__content').height( $('.tabs__content .is-active').outerHeight() ); }) })
Jen je potreba pripadne pohlidat situaci, kdy v html nebude unikatni tabs__content
PS. jeste je potreba ten radek s nastavenim vysky zakomponovat do resize udalosti

Díky smrtko, tvá rada mi značně pomohla. Ještě se musím nějak poprat s tou resize událostí a bude to kompletní a přesně podle představ. :-)

5. 8. 2019 22:42:19

https://webtrh.cz/diskuse/animace-sirky-elementu/#reply1410902

Michal Jeřábek

6. 8. 2019 10:02:45

Tady je CSS rešení pomocí transitions: https://codepen.io/michaljerabek/pen/NQXMLY

V podstatě je potřeba zmenšit výšku/šířku elementu na nulu "nefixním způsobem" (tzn. ne pomocí width/height) a při zobrazení nastavit požadované styly. Při animaci výšky je tak potřeba kromě paddingů, marginů, borderů apod. také nastavit line-height a font-size na 0px a v případě animace šířky si trochu pohrát s letter-spacingem (+ overflow: hidden). Je to ale rozumné použít jenom pro jednoduché prvky.

Pokud budete používat JS řešení, pak je místo řešení události resize lepší po skončení animace odstranit nastavenou hodnotu height z elementu (jeho výška se může změnit z vícero důvodů než jen z důvodu změny viewportu).

6. 8. 2019 10:02:45

https://webtrh.cz/diskuse/animace-sirky-elementu/#reply1410901

StepanP

(12 hodnocení)

7. 8. 2019 09:46:41

Napsal mjerabek;1538667
Tady je CSS rešení pomocí transitions: https://codepen.io/michaljerabek/pen/NQXMLY
V podstatě je potřeba zmenšit výšku/šířku elementu na nulu "nefixním způsobem" (tzn. ne pomocí width/height) a při zobrazení nastavit požadované styly. Při animaci výšky je tak potřeba kromě paddingů, marginů, borderů apod. také nastavit line-height a font-size na 0px a v případě animace šířky si trochu pohrát s letter-spacingem (+ overflow: hidden). Je to ale rozumné použít jenom pro jednoduché prvky.
Pokud budete používat JS řešení, pak je místo řešení události resize lepší po skončení animace odstranit nastavenou hodnotu height z elementu (jeho výška se může změnit z vícero důvodů než jen z důvodu změny viewportu).

Díky za pomoc, rozhodl jsem se pro řešení s jQuery, to mi přijde dostatečné. Ještě omrknu tu tvou radu ohledně odstranění height daného elementu. Díky! :-)

7. 8. 2019 09:46:41

https://webtrh.cz/diskuse/animace-sirky-elementu/#reply1410900

Pro odpověď se přihlašte.

Přihlásit