[Résolu] Ajax Parallel Load mais en douceur

Avec le APL de ZCore (documenté là Zpip, blocs de page et Ajax - SPIP-Contrib), les blocs objets de l’APL apparaissent d’un coup. Par exemple un bloc « aside » avec

define('_Z_AJAX_PARALLEL_LOAD', 'aside');

Quel serait le moyen pour adoucir l’apparition de ce bloc au moyen d’une transition d’opacité ?

Un peu d’exploration a donné les règles CSS suivantes :

	.aside > div:not(#zapl-aside) { animation: asideFadeIn 2s ease-in-out; }
	#zapl-aside { asideFadeOut 0.2s ease-in-out forwards; }
	@keyframes asideFadeIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}
	@keyframes asideFadeOut { 
		from { opacity: 1; }
		to { opacity: 0; }
	}

#zapl-aside c’est en effet le bloc « Chargement en cours ». Avec ces CSS, il disparaît en douceur mais rapidement quand l’.aside arrive, suivi de l’apparition progressive de l’.aside, plus lente.

1 « J'aime »

J’ai commencé une page sur le CarnetWiki pour des docs complémentaires sur APL si vous voulez y déposer vos astuces ou retours d’expérience aussi : Ajax Parallel Loading (APL) avec Zcore

1 « J'aime »

Les view-transition en css (transitions de vue dans un même document) seraient sûrement un bon candidat.
Mais c’est un peu « cutting edge », como se dice, et pas encore complètement supporté par Firefox je crois.
Pas encore eu le temps de jouer avec ça pour l’instant.