Autor Zpráva
RastyAmateur
Profil
Dobrý večer,

docela mě zajímá, jak se dělá animovaná aktualizace stránky, jako je například zde na DJPW. Jde o to, že se po kliknutí na logo nové (aktualizované) příspěvky plynule přesunou nahoru, a vše pod tím se posune.

Má někdo nějaký nápad, popř. odkaz na návod?

Děkuji moc za každý nápad.
Keeehi
Profil
Aktualizace bez znovunačtení bude obyčejný AJAX. Když dojdou data, tak pak už to je jen o javascript, který plynule mění CSS hodnoty elementům.
Chamurappi
Profil
Reaguji na RastyAmateura:
Zmíněný efekt jsem vytvářel já někdy před třemi roky. Z žádného návodu jsem nevycházel.

Děje se cca toto:
1) Stáhnu si aktuální verzi téže stránky ze serveru, ale ještě ji nezobrazuji.
2) Změřím si pozice důležitých odkazů v tabulce metodou getBoundingClientRect a poznamenám si, která cílová adresa je jak vysoko.
3) Vyměním starou tabulku s odkazy za novou tabulku.
4) Vzápětí si opět změřím pozice odkazů metodou getBoundingClientRect.
5) Odkazy, které znám z minulé verze tabulky, relativně odpozicuji na jejich původní pozice (znám pixelový rozdíl původní a nové výšky).
6) Odkazy, které neznám, zprůhledním. (Nebo jim extrémně snížím letter-spacing, pokud prohlížeč nezná opacity.)
7) Odanimuji změnu výšky a průhlednosti do výchozího stavu.

Nehýbe se s celými řádky, ale jen s elementy uvnitř řádků, protože uživatel může mít zapnutou zebru (jinak barevné sudé/liché řádky) a protože šoupání celých řádků mi tuším někde nechodilo.
Na animace jsem si tenkrát napsal setIntervalovou smyčku, která mění stav podle uběhlého času. Plynulejší rozjetí a dojetí dělá krok = (-Math.cos(krok * Math.PI) / 2) + 0.5 (pro krok mezi 0 a 1). Dnes bych možná použil transition.

Drobnou nedokonalost mého skriptu vidím v tom, že se animují pouze řádky přítomné v nové tabulce. Pokud v té staré bylo něco, co v nové úplně chybí, tak to zmizí neanimovaně.
Také je problém se znázorněním, že se nic nezměnilo – po nasazení tohoto skriptu do ostrého provozu nebyl efekt vodorovného zatřesení moc vlídně přijat a pochopen.
A ještě trochu větší problém je s indikací stavu, že se něco změnilo, ale ne pořadí řádků. Když se třeba změní jen počet odpovědí u vrchního řádku, tak se neanimuje vlastně nic.
RastyAmateur
Profil
Keeehi:
Došlo mi, že to bude přes ajax. Šlo mi o to, ja udělám, aby se ty prvky zase pěkně vyrovnaly... Ale děkuji za reakci...

Chamurappi:
Děkuji moc. Já to sice nemám v plánu dělat, ale zajímalo mě to. Možná si to i vyzkouším. Ještě jednou děkuji.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

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