Espérant toujours de meilleures transitions de pages natives

Ce serait bien de pouvoir animer la transition entre les pages si nous le voulons sur le Web sans recourir à des hacks ou à des choix d'architecture à part entière pour y parvenir. Je pourrais imaginer une API qui exécuterait des trucs , peut-être l'intégration avec WAAPI, avant que la page ne soit déchargée, et d'autres trucs après le chargement de la page suivante.

Nous avons une API OnBeforeunload, mais je ne sais pas quel type de bagages qui a. Nous pouvons techniquement créer des transitions de pages maintenant, même sans architecture d'une seule page, mais ce que je veux, ce sont des API construites qui nous aident à le faire proprement (fonctions compréhensibles) et avec les deux performances (fonctionnant aussi rapidement que de cliquer sur les liens) et l'accessibilité (comme la manipulation de la mise au point) à l'esprit.

Si vous construisez une application d'une seule page de toute façon, vous obtenez la liberté d'animer entre les vues car la page ne recharge jamais. Le danger ici est que vous pourriez choisir une application d'une seule page juste pour cette capacité, ce que je veux dire par avoir à adhérer à une architecture de site juste pour y parvenir. Cela ressemble à un compromis malheureux, car les applications à une seule page apportent une tonne de frais généraux, comme des problèmes d'outillage et d'accessibilité, dont vous n'auriez pas eu autrement besoin.

Sans une application d'une seule page, vous pouvez utiliser quelque chose comme Turbo et Animate.css comme celui-ci. Ou, la nouvelle transition d'Adam, un style, un hommage basé sur Clip-path () au chef-d'œuvre de Daniel Edan. Peut-être que si cette approche était associée à Instant.Page, ce serait aussi rapide que tout autre lien interne cliquez sur.

Il y a d'autres joueurs qui essaient de comprendre cela, comme Smoothstate.js et Swup. L'astuce étant: intercepter l'action pour passer à la page suivante, exécuter l'animation d'abord, puis charger la page suivante et animer la nouvelle page. Techniquement, cela ralentit un peu les choses, mais vous pouvez le faire assez efficacement et le mouvement ajoute suffisamment de distraction pour que les performances perçues soient même meilleures.

Idéalement, nous n'aurions pas à animer la page entière, mais nous pourrions avoir un contrôle total pour effectuer des transitions plus intéressantes. Heck, je le faisais il y a dix ans avec une page pour un musicien où cliquer sur le site vient de déplacer les choses pour que l'audio continue de jouer (et c'était amusant).

Ce serait un endroit idéal pour que la plate-forme Web intervienne. Je me souviens que Jake a poussé il y a des années, mais je ne sais pas si cela s'est passé n'importe où. Ensuite, nous avons des portails qui sont… OK? Ce sont comme si vous chargez un iframe sur la page, puis l'animer pour prendre le contrôle de toute la page (et mettre à jour l'URL). Pas beaucoup de nuance d'animation possible là-bas, mais vous pouvez certainement glisser certaines pages autour ou les décolorer (hé en voici une autre: l'autoroute), comme JQuery Mobile l'a fait dans les temps anciens.

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!