如何实现与 NodeBB 相同的页面淡入淡出过渡效果？

开发
1

你好。
我在 NodeBB 中比在 Discourse 中更喜欢页面过渡效果。
主要区别在于，在 Discourse 中，一旦点击链接，内容 HTML 就会被移除；而在 NodeBB 中，内容会保留，直到新内容准备好显示，从而在加载下一页时为内容提供 优雅的淡出效果。

这样的修改是否可行？是否需要大量的编码工作？

2

很喜欢这个想法！:light_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 中 :blush:

注意：目前这还不支持分类页面，你需要进一步完善这个思路。

3

我会试试，谢谢！

4

你好，我试用了你们插件中的这个功能，但效果不太一样：在我显示话题列表时，是请求的内容加载完成后淡入；而在 NodeBB 中，是当前内容在加载下一个内容时淡出。

最关键的是，我们需要找到一种方法，防止 Discourse 在点击链接后立即移除当前的 HTML。当前的 HTML 应该保留在原位，直到新内容加载完成（或者直到淡出效果结束——不过我不确定这样是否更好：upside_down_face:），并且准备就绪可以显示。

5

嗯，好的。那么我提供的只是你现在所描述内容的一半（就动画而言，还不包括编程工作量！）。你本质上是在要求延迟销毁，并将加载动画替换为淡出效果。不过，我对你关于另一系统运行情况的假设并不完全认同。异步调用加载数据需要多长时间根本无法预测，因此即使看起来是这样，淡出效果也不可能完美同步。也许在内容空白时存在一个短暂的延迟。欢迎继续跟进并解决剩余问题并分享结果，但这绝非易事 因为 Discourse 的加载动画出现在新路由上，而非旧路由的末尾。 更新：不，并非如此。它位于一个独立的小 div 中，按需显示。补充说明：点击操作后不久，列表容器就会被隐藏，这似乎会立即拆解列表区域（可能是 Ember 的某种隐式优化，但我不确定）。要解决这个问题，首先需要改变这一行为。

6

当然，它并不能预知未来 :rocket:。NodeBB 上的淡出效果大约是 200 毫秒。如果页面加载时间更长，你就会面对一片空白。

没错，你的理解是对的，这个想法基本上是用固定时长的淡出效果来替代加载动画 :slight_smile:。
如果加载速度快于淡出时间，那么淡出效果应该被中断，以便立即显示新内容。

编程并不是我的专长，我也不了解 Discourse 的运作方式，不确定能否搞定，但这值得尝试一下。

感谢你的建议和提示！