Comment GitHub parvient-il à naviguer de manière fluide dans les pages : AJAX ou une astuce CSS/JS ?

Navigation transparente des pages de Github : AJAX ou pas ?

En explorant un projet sur GitHub, tel que https://github.com/ insoshi/insoshi, vous avez peut-être remarqué une transition douce lorsque vous cliquez sur des dossiers. Ce comportement, où le dossier s'ouvre et l'URL change simultanément, soulève la question : est-ce réalisé via AJAX ou d'autres techniques ?

La réponse : AJAX at Play

Contrairement aux apparences, cet effet est bien basé sur AJAX. Ce type de menu coulissant était à l'origine utilisé dans l'interface de navigation de l'iPod. Bien qu'il ait pu y avoir des tentatives pour créer des effets similaires avec CSS/JS, l'approche utilisée par GitHub s'appuie sur JavaScript et XML asynchrones.

Pour visualiser les requêtes AJAX, vous pouvez utiliser l'outil Firebug dans Firefox. En activant la surveillance du réseau, vous observerez les demandes effectuées pour récupérer les listes de répertoires.

Effet de transition : mise en place

L'effet de transition observé lors de la navigation dans les dossiers est obtenu via une animation de diapositive basée sur JavaScript. Cette technique consiste à manipuler les propriétés CSS telles que l'opacité et l'affichage pour créer une transition fluide entre les pages actuelles et cibles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!