{"id":10313,"date":"2025-07-18T03:48:37","date_gmt":"2025-07-18T03:48:37","guid":{"rendered":"https:\/\/affinite.io\/cs\/?p=10313"},"modified":"2025-07-18T03:49:27","modified_gmt":"2025-07-18T03:49:27","slug":"efektivni-animace-prechodu-mezi-strankami-ve-wordpressu-plugin-view-transitions","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/efektivni-animace-prechodu-mezi-strankami-ve-wordpressu-plugin-view-transitions\/","title":{"rendered":"Efektivn\u00ed animace p\u0159echod\u016f mezi str\u00e1nkami ve WordPressu: Plugin View Transitions"},"content":{"rendered":"\n<p>Vylep\u0161en\u00ed u\u017eivatelsk\u00e9ho z\u00e1\u017eitku na webu je kl\u00ed\u010dov\u00e9 pro udr\u017een\u00ed n\u00e1v\u0161t\u011bvn\u00edk\u016f a zaji\u0161t\u011bn\u00ed jejich spokojenosti. Jedn\u00edm z efektivn\u00edch zp\u016fsob\u016f, jak toho dos\u00e1hnout, je implementace plynul\u00fdch animac\u00ed p\u0159i p\u0159echodu mezi str\u00e1nkami. Plugin <strong><a href=\"https:\/\/wordpress.org\/plugins\/view-transitions\/\" target=\"_blank\" rel=\"noopener\">View Transitions<\/a><\/strong> pro WordPress nab\u00edz\u00ed jednoduch\u00e9 \u0159e\u0161en\u00ed, kter\u00e9 umo\u017e\u0148uje p\u0159idat tyto animace bez nutnosti slo\u017eit\u00e9ho k\u00f3dov\u00e1n\u00ed. V tomto \u010dl\u00e1nku se pod\u00edv\u00e1me na to, co tento plugin nab\u00edz\u00ed, jak funguje a jak podobn\u00e9ho efektu dos\u00e1hnout pomoc\u00ed vlastn\u00edho k\u00f3du.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Co plugin View Transitions d\u011bl\u00e1 a jak se instaluje<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Co plugin d\u011bl\u00e1<\/h3>\n\n\n\n<p>Plugin <strong>View Transitions<\/strong>, vyvinut\u00fd Felixem Arntzem, implementuje podporu pro <strong>cross-document view transitions<\/strong> ve WordPressu. To znamen\u00e1, \u017ee p\u0159i p\u0159echodu mezi r\u016fzn\u00fdmi str\u00e1nkami na webu dojde k plynul\u00e9 animaci, kter\u00e1 nahrazuje tradi\u010dn\u00ed tvrd\u00e9 p\u0159echody mezi URL adresami. V\u00fdchoz\u00ed efekt je fade (p\u0159echod mezi str\u00e1nkami pomoc\u00ed vyblednut\u00ed).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Jak se instaluje<\/h3>\n\n\n\n<ol class=\"wp-block-list has-white-color has-text-color has-link-color wp-elements-7bd4516262eeb8477c7415dc3e73819f\">\n<li>P\u0159ejd\u011bte do administrace WordPressu a v menu vyberte <strong>Pluginy > P\u0159idat nov\u00fd<\/strong>.<\/li>\n\n\n\n<li>Do vyhled\u00e1vac\u00edho pole zadejte <strong>View Transitions<\/strong>.<\/li>\n\n\n\n<li>Klikn\u011bte na tla\u010d\u00edtko <strong>Instalovat nyn\u00ed<\/strong> a pot\u00e9 na <strong>Aktivovat<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p>Alternativn\u011b m\u016f\u017eete plugin st\u00e1hnout a nahr\u00e1t do adres\u00e1\u0159e <code>\/wp-content\/plugins\/<\/code> a n\u00e1sledn\u011b jej aktivovat v administraci.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">K \u010demu slou\u017e\u00ed<\/h3>\n\n\n\n<p>Po aktivaci pluginu se ve WordPressu p\u0159id\u00e1 nov\u00e1 sekce v nastaven\u00ed \u010dten\u00ed, kde m\u016f\u017eete konfigurovat chov\u00e1n\u00ed p\u0159echod\u016f mezi str\u00e1nkami. Plugin automaticky detekuje podporovan\u00e9 prohl\u00ed\u017ee\u010de a aplikuje plynul\u00e9 p\u0159echody tam, kde je to mo\u017en\u00e9. U\u017eivatel\u00e9 s prohl\u00ed\u017ee\u010di, kter\u00e9 tuto funkci nepodporuj\u00ed, nebudou m\u00edt \u017e\u00e1dn\u00e9 negativn\u00ed zku\u0161enosti; p\u0159echody budou jednodu\u0161e chyb\u011bt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Co je to Cross-document View Transitions a jak funguje<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Co to je<\/h3>\n\n\n\n<p><strong>Cross-document view transitions<\/strong> jsou animace, kter\u00e9 se spou\u0161t\u011bj\u00ed p\u0159i p\u0159echodu mezi r\u016fzn\u00fdmi dokumenty (str\u00e1nkami) na webu. Na rozd\u00edl od tradi\u010dn\u00edch tvrd\u00fdch p\u0159echod\u016f, kter\u00e9 mohou p\u016fsobit ru\u0161iv\u011b, tyto animace zaji\u0161\u0165uj\u00ed plynul\u00fd p\u0159echod, kter\u00fd zlep\u0161uje u\u017eivatelsk\u00fd z\u00e1\u017eitek.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Jak funguje<\/h3>\n\n\n\n<p>P\u0159i navigaci mezi dv\u011bma str\u00e1nkami se prohl\u00ed\u017ee\u010d pokus\u00ed zachytit sn\u00edmky (snapshots) specifick\u00fdch element\u016f, kter\u00e9 maj\u00ed p\u0159i\u0159azen\u00fd atribut <code>view-transition-name<\/code>. Tyto sn\u00edmky se n\u00e1sledn\u011b pou\u017eij\u00ed k vytvo\u0159en\u00ed animace mezi star\u00fdm a nov\u00fdm obsahem str\u00e1nky. Cel\u00fd proces je \u0159\u00edzen pomoc\u00ed CSS animac\u00ed, co\u017e znamen\u00e1, \u017ee nevy\u017eaduje slo\u017eit\u00fd JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Podm\u00ednky pro fungov\u00e1n\u00ed<\/h3>\n\n\n\n<ul class=\"wp-block-list has-white-color has-text-color has-link-color wp-elements-15c7ccbe8003bc38e5ce78ff7b295ca7\">\n<li><strong>Stejn\u00fd p\u016fvod (same-origin):<\/strong> Ob\u011b str\u00e1nky mus\u00ed poch\u00e1zet ze stejn\u00e9ho p\u016fvodu (stejn\u00fd protokol, dom\u00e9na a port).<\/li>\n\n\n\n<li><strong>Opt-in:<\/strong> Ob\u011b str\u00e1nky mus\u00ed explicitn\u011b souhlasit s t\u00edm, \u017ee se na nich budou p\u0159echody prov\u00e1d\u011bt, a to pomoc\u00ed CSS pravidla <code>@view-transition { navigation: auto; }<\/code>.<\/li>\n\n\n\n<li><strong>Dostupnost v prohl\u00ed\u017ee\u010di:<\/strong> Funkce je podporov\u00e1na v prohl\u00ed\u017ee\u010d\u00edch jako Chrome 126+, Edge 126+ a Safari 18.2+. U\u017eivatel\u00e9 s nekompatibiln\u00edmi prohl\u00ed\u017ee\u010di nebudou m\u00edt negativn\u00ed zku\u0161enosti; p\u0159echody jednodu\u0161e nebudou aplikov\u00e1ny .<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Jak podobn\u00e9ho efektu dos\u00e1hnout k\u00f3dem<\/h2>\n\n\n\n<p>Pokud chcete implementovat vlastn\u00ed plynul\u00e9 p\u0159echody mezi str\u00e1nkami bez pou\u017eit\u00ed pluginu, m\u016f\u017eete vyu\u017e\u00edt n\u00e1sleduj\u00edc\u00ed postup:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. P\u0159id\u00e1n\u00ed CSS pravidla pro opt-in<\/h3>\n\n\n\n<p>V obou dokumentech (str\u00e1nk\u00e1ch), mezi kter\u00fdmi chcete p\u0159ech\u00e1zet, p\u0159idejte do CSS n\u00e1sleduj\u00edc\u00ed pravidlo:<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-text-color has-background has-link-color wp-elements-a1789723ec6a64bbaabb6a3f27253562\" style=\"background-color:#292929\"><code>@view-transition {\n  navigation: auto;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. P\u0159i\u0159azen\u00ed <code>view-transition-name<\/code> k element\u016fm<\/h3>\n\n\n\n<p>Ka\u017ed\u00e9mu elementu, kter\u00fd m\u00e1 b\u00fdt sou\u010d\u00e1st\u00ed animace, p\u0159i\u0159a\u010fte unik\u00e1tn\u00ed hodnotu atributu <code>view-transition-name<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-text-color has-background has-link-color wp-elements-78e8b080ccee5886ba37488b32434c6d\" style=\"background-color:#292929\"><code>&lt;article style=\"view-transition-name: article-42;\">\n  &lt;h2>Article 42 \u2013 The answer to everything&lt;\/h2>\n&lt;\/article><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. Definice animac\u00ed<\/h3>\n\n\n\n<p>V CSS definujte animace pro star\u00fd a nov\u00fd obsah:<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-text-color has-background has-link-color wp-elements-5cbf5ec1a564fef1bf4a65ae72066e56\" style=\"background-color:#292929\"><code>@keyframes fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n::view-transition-old(article) {\n  animation: fade-out 0.5s ease-in-out;\n}\n\n::view-transition-new(article) {\n  animation: fade-in 0.5s ease-in-out;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Testov\u00e1n\u00ed a lad\u011bn\u00ed<\/h3>\n\n\n\n<p>Po implementaci je d\u016fle\u017eit\u00e9 otestovat p\u0159echody ve v\u0161ech podporovan\u00fdch prohl\u00ed\u017ee\u010d\u00edch a ujistit se, \u017ee animace funguj\u00ed plynule. V p\u0159\u00edpad\u011b pot\u0159eby m\u016f\u017eete upravit d\u00e9lku animace, typ animace nebo p\u0159idat dal\u0161\u00ed efekty. Pro sledov\u00e1n\u00ed aktu\u00e1ln\u00ed podpory r\u016fzn\u00fdch funkc\u00ed v prohl\u00ed\u017ee\u010d\u00edch m\u016f\u017eete vyu\u017e\u00edt webovou str\u00e1nku <a class=\"\" href=\"https:\/\/caniuse.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Can I use<\/strong><\/a>, kter\u00e1 poskytuje p\u0159ehled kompatibility modern\u00edch webov\u00fdch technologi\u00ed nap\u0159\u00ed\u010d r\u016fzn\u00fdmi prohl\u00ed\u017ee\u010di a verzemi. Tento n\u00e1stroj v\u00e1m pom\u016f\u017ee zjistit, zda je va\u0161e implementace podporov\u00e1na ve v\u0161ech prohl\u00ed\u017ee\u010d\u00edch, kter\u00e9 va\u0161e c\u00edlov\u00e1 skupina pou\u017e\u00edv\u00e1, a p\u0159edej\u00edt tak probl\u00e9m\u016fm s nekompatibilitou.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Z\u00e1v\u011br<\/h2>\n\n\n\n<p>Plugin <strong>View Transitions<\/strong> pro WordPress nab\u00edz\u00ed jednoduch\u00fd zp\u016fsob, jak implementovat plynul\u00e9 p\u0159echody mezi str\u00e1nkami bez nutnosti slo\u017eit\u00e9ho k\u00f3dov\u00e1n\u00ed. Pokud v\u0161ak preferujete vlastn\u00ed \u0159e\u0161en\u00ed, m\u016f\u017eete vyu\u017e\u00edt v\u00fd\u0161e uveden\u00fd postup k dosa\u017een\u00ed podobn\u00e9ho efektu. Plynul\u00e9 animace p\u0159echod\u016f mohou v\u00fdrazn\u011b zlep\u0161it u\u017eivatelsk\u00fd z\u00e1\u017eitek a u\u010dinit v\u00e1\u0161 web modern\u011bj\u0161\u00edm a atraktivn\u011bj\u0161\u00edm.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vylep\u0161en\u00ed u\u017eivatelsk\u00e9ho z\u00e1\u017eitku na webu je kl\u00ed\u010dov\u00e9 pro udr\u017een\u00ed n\u00e1v\u0161t\u011bvn\u00edk\u016f a zaji\u0161t\u011bn\u00ed jejich spokojenosti. Jedn\u00edm z efektivn\u00edch zp\u016fsob\u016f, jak toho dos\u00e1hnout, je implementace plynul\u00fdch animac\u00ed p\u0159i p\u0159echodu mezi str\u00e1nkami. Plugin View Transitions pro WordPress nab\u00edz\u00ed jednoduch\u00e9 \u0159e\u0161en\u00ed, kter\u00e9 umo\u017e\u0148uje p\u0159idat tyto animace bez nutnosti slo\u017eit\u00e9ho k\u00f3dov\u00e1n\u00ed. V tomto \u010dl\u00e1nku se pod\u00edv\u00e1me na to, co tento<\/p>\n","protected":false},"author":1,"featured_media":10314,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[31],"tags":[],"class_list":["post-10313","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-pluginy"],"uagb_featured_image_src":{"full":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2025\/07\/view-transitions.png",773,251,false],"thumbnail":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2025\/07\/view-transitions-150x150.png",150,150,true],"medium":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2025\/07\/view-transitions-300x97.png",300,97,true],"medium_large":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2025\/07\/view-transitions-768x249.png",640,208,true],"large":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2025\/07\/view-transitions.png",640,208,false],"1536x1536":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2025\/07\/view-transitions.png",773,251,false],"2048x2048":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2025\/07\/view-transitions.png",773,251,false],"archive-list":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2025\/07\/view-transitions-400x251.png",400,251,true]},"uagb_author_info":{"display_name":"Affinite","author_link":"https:\/\/affinite.io\/cs\/author\/affinite\/"},"uagb_comment_info":0,"uagb_excerpt":"Vylep\u0161en\u00ed u\u017eivatelsk\u00e9ho z\u00e1\u017eitku na webu je kl\u00ed\u010dov\u00e9 pro udr\u017een\u00ed n\u00e1v\u0161t\u011bvn\u00edk\u016f a zaji\u0161t\u011bn\u00ed jejich spokojenosti. Jedn\u00edm z efektivn\u00edch zp\u016fsob\u016f, jak toho dos\u00e1hnout, je implementace plynul\u00fdch animac\u00ed p\u0159i p\u0159echodu mezi str\u00e1nkami. Plugin View Transitions pro WordPress nab\u00edz\u00ed jednoduch\u00e9 \u0159e\u0161en\u00ed, kter\u00e9 umo\u017e\u0148uje p\u0159idat tyto animace bez nutnosti slo\u017eit\u00e9ho k\u00f3dov\u00e1n\u00ed. V tomto \u010dl\u00e1nku se pod\u00edv\u00e1me na to, co tento","_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/10313"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=10313"}],"version-history":[{"count":2,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/10313\/revisions"}],"predecessor-version":[{"id":10317,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/10313\/revisions\/10317"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/10314"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=10313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=10313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=10313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}