Prodej módní značky DANNYS clothing
Zobrazují se odpovědi 1 až 6 z 6

Animace šířky elementu

  1. 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

  2. Co se právě děje na Webtrhu?
  3. 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. Pres css zatim zadnou cestu nevidim (!= ze neni), ale s jQ to jde celkem jednoduse:
    Kód:
      // 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

  5. Citace Původně odeslal smrtka Zobrazit příspěvek
    Pres css zatim zadnou cestu nevidim (!= ze neni), ale s jQ to jde celkem jednoduse:
    Kód:
      // 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. :-)

  6. 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).
    Naposledy upravil mjerabek : 06.08.2019 v 10:39

  7. Citace Původně odeslal mjerabek Zobrazit příspěvek
    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! :-)

Hostujeme u Server powered by TELE3