Autor Zpráva
Stalker
Profil
Ahoj,

chtěl bych animovat display: none a display: block přes css. Vím, že to nejde, ale určitě to nějakou kličkou jde. Pomocí pozicování, opacity, transition, či key frames apod. Ale ani za boha se mi to nedaří. Máte někdo nápad, jak docílit animace (fade out, fade in) jen skrze css?

Díky moc :-)
anonymníí
Profil *
Co jsi zkoušel, když se ti to nepodařilo? Google taky nefunguje?

www.google.cz/search?client=safari&rls=en&q=fade+in+css&ie=UTF-8&oe=UTF-8&gfe_rd=cr&ei=YvwdVuq2J4rP0wWempeADg
Stalker
Profil
Asi jsem se nyvjadril dost jasne. Chtel, bych aby se to animovalo na click a fungovalo to jako fade in, fade out.

ukazka: jsfiddle.net/VV2ek/3624 - edit: 9:16 - spatnej odkaz

Sice to faduje, ale vzdy, kdyz prvek zmizi, tak to jde skokove, chtel bych to plynule. Kliknu, behem pul vteriny postupne zmizi.. a hned na to se behem dalsi pul vteriny plynule zobrazi.


Tento pripad je jenom ukazkovej, samozrejme to je cely spatne, opacity ani display:block/none muj problem samozrejme neresi. Vlastne rad bych neco takoveho, co je tady dole na strance jako ukazka: api.jquery.com/fadetoggle
Stalker
Profil
Tak jsem si s tím hrál, zkoušel všechny možný různý způsoby a nenapadá mě způsob, jakým to udělat bez použití jQuery.

Hrál jsem si s tímto příkladem, který mám nachystaný: jsfiddle.net/c27ss207. V reálu by to mělo vypadat potom tak, že kliknu na rámeček, nadpis mi plynule zmizí a jakmile zmizí, tak se mi plynule objeví obsah.
Stalker
Profil
Dospěl jsem k názoru, že to vyřešit pouze přes CSS nelze. Jediný způsob, jak by to šlo udělat je změnit HTML markup a boxy, které chci schovávat, či odkrývat, bych musel absolutně napozicovat a ty pak animovat přes opacity. Problém by pak nastal v případě, že by v již zmiňovaných boxech byl dinamický obsah a za němi byl další obsah, popřípadě bych řešil fluidní responziv a výška by se mi různě měnila...

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: