Как добиться такого же плавного перехода страниц, как в NodeBB?

Разработка
1

Привет.
Одна вещь, которая мне нравится в NodeBB больше, чем в Discourse, — это эффект перехода между страницами.
Основное отличие заключается в том, что в Discourse HTML-контент удаляется сразу после клика по ссылке, тогда как в NodeBB контент сохраняется до тех пор, пока новый не будет готов к отображению, что позволяет создать приятный эффект плавного затухания контента во время загрузки следующей страницы.

Возможна ли такая модификация? Потребует ли она значительных усилий в программировании?

2

Отличная идея! :bulb: :heart: (но, честно говоря, это может довольно быстро надоесть? :wink: )

Да, это можно сделать.

Один из способов — переопределить компонент списка тем примерно следующим образом:

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 текущий контент плавно исчезает во время загрузки следующего.

Главное — нам нужно найти способ предотвратить немедленное удаление текущего HTML в Discourse после клика по ссылке. HTML должен оставаться на месте до тех пор, пока не загрузится новый контент (или пока не закончится эффект затухания, хотя я не уверен, что это лучше :upside_down_face:), и не будет готов к отображению.

5

Хм, хорошо. То, что я предоставил, составляет 50% от того, что вы сейчас описываете (если говорить об анимации, а не о затратах на программирование!). По сути, вы предлагаете отложить разборку и заменить спиннер на плавное исчезновение. Однако я не убеждён, что ваше предположение о том, что происходит в другой системе, верно. Surely нет способа предсказать, сколько времени займёт загрузка данных при асинхронном вызове, поэтому плавное исчезновение не будет идеально синхронизировано, даже если так кажется. Возможно, есть небольшая задержка, когда элементы пусты. Не стесняйтесь продолжить обсуждение и проработать детали, хотя это не будет тривиальной задачей поскольку спиннер Discourse появляется на новом маршруте, а не в конце старого. Обновление: нет, это не так. Он находится в своём собственном небольшом div-блоке, который становится видимым по мере необходимости. Несколько дополнительных замечаний: контейнер списка скрывается вскоре после действия клика, что, похоже, немедленно разбирает область списка (возможно, неявная оптимизация Ember, но не уверен). Для начала нужно изменить это поведение.

6

Конечно, это не чтение будущего :rocket:. Исчезновение в NodeBB длится примерно 200 мс. Если страница загружается дольше, то вы увидите пустой экран.

Да, вы правы, идея в том, чтобы заменить индикатор загрузки на исчезновение фиксированной длительности. :slight_smile:
Если загрузка происходит быстрее, чем длится исчезновение, то анимацию следует прервать, чтобы сразу отобразить новый контент.

Программирование — не моя основная специализация, и я не знаю, как работает Discourse, поэтому не уверен, что смогу разобраться, но это стоит посмотреть.

Спасибо за ваши советы и предложения!