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

开发
1

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

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

2 个赞
2

Love the idea! :bulb: :heart: (but tbh, might get annoying pretty fast? :wink: )

Yep can be done.

One way is to override the Topic LIst component something like as follows:

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

I just tested this on TLP and it works, but the changes are in amongst existing overrides of this component, so apologies if there is typo above I merely stripped out all the other unnecessary TLP stuff.

Tempted to add this as a gratuitous option to TLP :smiley:

NB this won’t support the Category page at present, you will need to develop the idea further.

5 个赞
3

I’ll try this, thank you!

1 个赞
4

Hi, I tried the feature in your plugin, but that’s not quite the same: when I display the topic list, that’s the requested content which fades in after being loaded; on NodeBB, it’s the current content that fades out while the next content is being loaded.

The main thing is that we should find a way to prevent Discourse removing the current HTML immediately after clicking a link. The HTML should be kept in place until the new content has been loaded (or until the fade out effect has ended but I’m not sure that’s better :upside_down_face:) and is ready to be displayed.

1 个赞
5

Hmmm, ok. What I provided is then 50% of what you are now describing (of the animation, if not the programming effort!). You are essentially asking to delay the tear-down and replace the spinner with a fade out. However, I not convinced you are correct in your assumption about what is going on on the other system. There’s surely no way one can predict how long it will take to load the data with an asynchronous call so the fade out won’t be perfectly synced even if that’s what appears to be happening. Perhaps there’s a short delay when things are blank. Feel free to follow up and work out the rest and share though that’s not going to be a trivial task since Discourse’s spinner appears on the new route not the end of the old one. update: no, it does not. It’s in its own little div which is made visible as required. Some additional notes: the list container is hidden shortly after the click action, which seems to immediately dismantle the list-area (possibly an implicit Ember optimisation though not sure). One would need to change that behaviour to start with.

3 个赞
6

Of course it doesn’t read the future :rocket: . The fade out on NodeBB seems to be about 200ms. If the page takes longer to load, then you’ll contemplate a blank screen.

And yes you’re right, the idea is basically replacing the spinner by a fixed duration fade out. :slight_smile:
If the loading time is faster than the fade out, then the fading should be interrupted to let the new content to be displayed.

Programming isn’t my primary skill and I don’t know how Discourse works, I’m not sure I’ll figure out, but that’s worth to take look.

Thanks for your advice and suggestions!

4 个赞