Comment obtenir la même transition de page en fondu que NodeBB ?

Dev
1

Bonjour.
Une chose que je préfère dans NodeBB par rapport à Discourse, c’est l’effet de transition de page.
La principale différence est que sur Discourse, le HTML du contenu est supprimé dès que vous cliquez sur un lien, tandis que sur NodeBB, le contenu est conservé jusqu’à ce que le nouveau contenu soit prêt à être affiché, permettant ainsi un bel effet de fondu sur le contenu pendant le chargement de la page suivante.

Une telle modification serait-elle possible ? Cela nécessiterait-il beaucoup de développement ?

2

J’adore l’idée ! :bulb: :heart: (mais honnêtement, ça risque de devenir vite agaçant ? :wink: )

Oui, c’est faisable.

Une méthode consiste à remplacer le composant Topic List comme suit :

api.modifyClass('component:topic-list',  {
        @on('init')
        setup() {
           $("#list-area").fadeOut(0);
        },  
        @on('didRender')
        completeRender(){
          $("#list-area").fadeIn(600);
        }
    }
)

Je viens de tester cela sur TLP et cela fonctionne, mais les modifications sont mélangées à des remplacements existants de ce composant. Désolé s’il y a une faute de frappe ci-dessus ; je me suis contenté de supprimer tout le reste inutile lié à TLP.

Je suis tenté d’ajouter cela en tant qu’option gratuite à TLP :smiley:

NB : cela ne prendra pas en charge la page Catégorie pour l’instant ; vous devrez développer l’idée davantage.

3

Je vais essayer, merci !

4

Salut, j’ai essayé la fonctionnalité de votre plugin, mais ce n’est pas tout à fait la même chose : lorsque j’affiche la liste des sujets, c’est le contenu demandé qui apparaît en fondu après son chargement ; sur NodeBB, c’est le contenu actuel qui disparaît en fondu pendant que le contenu suivant est chargé.

L’essentiel est que nous devrions trouver un moyen d’empêcher Discourse de supprimer le HTML actuel immédiatement après avoir cliqué sur un lien. Le HTML devrait rester en place jusqu’à ce que le nouveau contenu soit chargé (ou jusqu’à ce que l’effet de fondu se termine, mais je ne suis pas sûr que ce soit mieux :upside_down_face:) et soit prêt à être affiché.

5

Hmmm, d’accord. Ce que j’ai fourni représente donc 50 % de ce que vous décrivez maintenant (en ce qui concerne l’animation, si ce n’est l’effort de programmation !). Vous demandez essentiellement de retarder la démolition et de remplacer le spinner par un fondu en sortie. Cependant, je ne suis pas convaincu que votre hypothèse sur ce qui se passe sur l’autre système soit correcte. Il est certain qu’on ne peut pas prédire combien de temps il faudra pour charger les données avec un appel asynchrone, de sorte que le fondu ne sera pas parfaitement synchronisé, même si c’est ce qui semble se produire. Peut-être y a-t-il un court délai lorsque l’écran est vide. N’hésitez pas à faire un suivi, à régler le reste et à partager, bien que cela ne soit pas une tâche triviale puisque le spinner de Discourse apparaît sur la nouvelle route et non à la fin de l’ancienne. mise à jour : non, ce n’est pas le cas. Il se trouve dans sa propre petite div qui est rendue visible selon les besoins. Quelques notes supplémentaires : le conteneur de la liste est masqué peu après l’action de clic, ce qui semble immédiatement démanteler la zone de liste (peut-être une optimisation implicite d’Ember, bien que je ne sois pas sûr). Il faudrait commencer par modifier ce comportement.

6

Bien sûr, on ne lit pas dans le futur :rocket: . La disparition en fondu sur NodeBB semble durer environ 200 ms. Si la page met plus de temps à charger, vous vous retrouverez alors face à un écran blanc.

Et oui, vous avez raison, l’idée consiste essentiellement à remplacer le spinner par une disparition en fondu d’une durée fixe. :slight_smile:
Si le temps de chargement est plus rapide que la durée du fondu, alors l’effet de fondu devrait être interrompu pour permettre l’affichage du nouveau contenu.

La programmation n’est pas ma compétence principale et je ne connais pas le fonctionnement de Discourse ; je ne suis pas sûr d’y arriver, mais cela vaut la peine d’y jeter un œil.

Merci pour vos conseils et suggestions !