Ottenere la stessa transizione di pagina dissolvente di NodeBB?

Sviluppatore
1

Ciao.
Una cosa che apprezzo di più in NodeBB rispetto a Discourse è l’effetto di transizione tra le pagine.
La differenza principale è che su Discourse l’HTML del contenuto viene rimosso non appena si clicca su un link, mentre su NodeBB il contenuto rimane visibile finché il nuovo contenuto non è pronto per essere mostrato, consentendo un elegante effetto di dissolvenza in uscita sul contenuto durante il caricamento della pagina successiva.

Sarebbe possibile apportare una modifica del genere? Richiederebbe una programmazione complessa?

2

Adoro l’idea! :bulb: :heart: (ma a dire il vero, potrebbe diventare noioso abbastanza in fretta? :wink: )

Sì, è fattibile.

Un modo è sovrascrivere il componente Topic List in questo modo:

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

L’ho appena testato su TLP e funziona, ma le modifiche sono inserite tra altre sovrascritture esistenti di questo componente, quindi scusate se ci sono errori di battitura; ho semplicemente rimosso tutto il resto non necessario specifico di TLP.

Sono tentato di aggiungerlo come opzione facoltativa a TLP :smiley:

NB al momento questo non supporta la pagina Categoria; dovrai sviluppare ulteriormente l’idea.

3

Ci proverò, grazie!

4

Ciao, ho provato la funzionalità nel tuo plugin, ma non è esattamente la stessa cosa: quando visualizzo l’elenco degli argomenti, è il contenuto richiesto che appare gradualmente dopo essere stato caricato; su NodeBB, invece, è il contenuto corrente che svanisce mentre viene caricato il contenuto successivo.

La cosa principale è che dovremmo trovare un modo per impedire a Discourse di rimuovere l’HTML corrente immediatamente dopo aver cliccato su un link. L’HTML dovrebbe rimanere in posizione fino a quando il nuovo contenuto non è stato caricato (o fino alla fine dell’effetto di dissolvenza, ma non sono sicuro che sia meglio :upside_down_face:) ed è pronto per essere visualizzato.

5

Hmm, ok. Quindi ciò che ho fornito corrisponde al 50% di ciò che stai descrivendo ora (per quanto riguarda l’animazione, se non lo sforzo di programmazione!). Stai essenzialmente chiedendo di ritardare la distruzione e di sostituire lo spinner con un dissolvenza in uscita. Tuttavia, non sono convinto che la tua ipotesi su ciò che accade sull’altro sistema sia corretta. Sicuramente non è possibile prevedere quanto tempo richiederà il caricamento dei dati con una chiamata asincrona, quindi il dissolvenza non sarà perfettamente sincronizzato, anche se così sembra. Forse c’è un breve ritardo quando lo schermo è vuoto. Sentiti libero di fare seguito e di risolvere il resto e condividere, anche se non sarà un compito banale poiché lo spinner di Discourse appare sulla nuova rotta e non alla fine di quella vecchia. aggiornamento: no, non è così. Si trova nel suo piccolo div che viene reso visibile solo quando necessario. Alcune note aggiuntive: il contenitore dell’elenco viene nascosto poco dopo l’azione del click, il che sembra smantellare immediatamente l’area dell’elenco (forse un’ottimizzazione implicita di Ember, anche se non ne sono sicuro). Bisognerebbe iniziare modificando quel comportamento.

6

Ovviamente non legge il futuro :rocket:. Lo sfarfallio di uscita su NodeBB sembra durare circa 200 ms. Se il caricamento della pagina richiede più tempo, ti troverai a guardare uno schermo vuoto.

E sì, hai ragione: l’idea è sostanzialmente sostituire lo spinner con uno sfarfallio di uscita di durata fissa. :slight_smile:
Se il tempo di caricamento è inferiore alla durata dello sfarfallio, quest’ultimo dovrebbe essere interrotto per permettere la visualizzazione del nuovo contenuto.

La programmazione non è la mia competenza principale e non so come funziona Discourse; non sono sicuro di riuscire a capirlo, ma vale la pena dare un’occhiata.

Grazie per i tuoi consigli e suggerimenti!