NodeBB と同じフェードページ遷移を達成できますか？

開発
1

こんにちは。
Discourse よりも NodeBB で気に入っている点の一つに、ページ遷移のエフェクトがあります。
主な違いは、Discourse ではリンクをクリックするとすぐにコンテンツの HTML が削除されてしまうのに対し、NodeBB では新しいコンテンツが表示される準備ができるまでコンテンツが保持され、次のページが読み込まれている間にコンテンツが美しくフェードアウトする エフェクトが可能 になる点です。

このような変更は可能でしょうか？それとも大規模なコーディングが必要になるでしょうか？

2

アイデア素晴らしい！:bulb: :heart: （でも正直、すぐに面倒になるかも？ :wink: ）

はい、可能です。

一つの方法は、Topic List コンポーネントを以下のようにオーバーライドすることです。

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

これを TLP でテストしましたが、動作します。ただし、既存のオーバーライドの中に変更が含まれているため、上記にタイプミスがある場合はお詫びします。単に TLP に関連する他の不要な部分を除去しただけです。

これを TLP のおまけオプションとして追加したくなりますね :smiley:

なお、現時点ではカテゴリページには対応していません。このアイデアをさらに発展させる必要があります。

3

試してみます、ありがとうございます！

4

こんにちは。プラグインの機能を試してみましたが、少し異なるようです。トピック一覧を表示すると、読み込まれた後にリクエストされたコンテンツがフェードインします。NodeBB では、次のコンテンツが読み込まれている間に現在のコンテンツがフェードアウトします。

最も重要なのは、リンクをクリックした直後に Discourse が現在の HTML を即座に削除しないようにする方法を見つけることです。新しいコンテンツが読み込まれるまで（またはフェードアウト効果が終了するまでですが、そちらの方が良いかどうかは確信が持てません :upside_down_face:）、HTML はその場に保持され、表示の準備ができるまで維持されるべきです。

5

ふむ、わかった。私が提供したものは、あなたが今説明しているものの50%程度だ（アニメーションに関しては、プログラミングの労力については別として）。 essentially、あなたはテardownを遅らせ、スピナーをフェードアウトに置き換えることを求めている。しかし、他のシステムで何が起きているかについてのあなたの仮説には、私は確信が持てない。非同期呼び出しでデータの読み込みにどれくらい時間がかかるかを予測する方法は確実にないため、それが起きているように見えるとしても、フェードアウトは完璧に同期しないはずだ。もしかすると、空白の状態で短い遅延があるのかもしれない。残りの部分を解決して共有するのは自由だが、それは簡単な作業ではないだろう。なぜなら、Discourseのスピナーは新しいルートではなく、古いルートの終わりに表示されるからだ。 追記：いいえ、そうではない。それは必要なときに表示される、独自の小さなdivの中に存在する。追加のメモ：リストコンテナはクリックアクションの直後に非表示になり、これはリストエリアを即座に解体しているように見える（おそらく暗黙的なEmberの最適化かもしれないが、確信はない）。この動作を変更することから始める必要がある。

6

もちろん、未来を読むことはできません :rocket: 。NodeBB のフェードアウトは約 200ms のようです。ページの読み込みにそれ以上時間がかかる場合、空白の画面をじっと見つめることになります。

その通りです。基本的なアイデアは、ローディングスピナーを固定時間のフェードアウトに置き換えることです :slight_smile: 。
読み込み時間がフェードアウトより短い場合は、新しいコンテンツが表示されるようにフェードアウトを中断する必要があります。

プログラミングは私の主なスキルではなく、Discourse の仕組みもよくわかりません。理解できるかどうかわかりませんが、検討する価値はありそうです。
アドバイスや提案をありがとうございます！