안녕하세요.
NodeBB에서 Discourse보다 더 마음에 드는 점 중 하나는 페이지 전환 효과입니다.
주된 차이는 Discourse에서는 링크를 클릭하는 즉시 콘텐츠 HTML이 제거되는 반면, NodeBB에서는 새 콘텐츠가 표시될 준비가 될 때까지 기존 콘텐츠가 유지된다는 것입니다. 덕분에 다음 페이지가 로드되는 동안 콘텐츠에 자연스러운 페이드아웃 효과가 적용됩니다.
이러한 수정이 가능한가요? 대량의 코딩 작업이 필요할까요?
안녕하세요.
NodeBB에서 Discourse보다 더 마음에 드는 점 중 하나는 페이지 전환 효과입니다.
주된 차이는 Discourse에서는 링크를 클릭하는 즉시 콘텐츠 HTML이 제거되는 반면, NodeBB에서는 새 콘텐츠가 표시될 준비가 될 때까지 기존 콘텐츠가 유지된다는 것입니다. 덕분에 다음 페이지가 로드되는 동안 콘텐츠에 자연스러운 페이드아웃 효과가 적용됩니다.
이러한 수정이 가능한가요? 대량의 코딩 작업이 필요할까요?
좋은 아이디어네요!
(솔직히 말하면 금방 지루해질 수도 있겠죠?
)
네, 가능합니다.
한 가지 방법은 다음과 같이 Topic List 컴포넌트를 오버라이드하는 것입니다:
api.modifyClass('component:topic-list', {
@on('init')
setup() {
$("#list-area").fadeOut(0);
},
@on('didRender')
completeRender(){
$("#list-area").fadeIn(600);
}
}
)
TLP에서 이 코드를 테스트해 보니 잘 작동합니다. 다만 이 변경사항은 해당 컴포넌트의 기존 오버라이드들과 섞여 있어서, 위에서 언급한 코드에 오타가 있을 수 있습니다. TLP에 포함된 다른 불필요한 부분들은 모두 제거했기 때문입니다.
이 기능을 TLP의 선택 옵션으로 추가하고 싶은 마음이 듭니다 ![]()
참고로 현재 이 방법은 Category 페이지를 지원하지 않습니다. 이 아이디어를 더 발전시켜야 합니다.
한번 해볼게요, 감사합니다!
안녕하세요, 플러그인의 해당 기능을 시도해 보았지만, 원하시는 것과 다소 차이가 있습니다. 제 경우, 주제 목록을 표시할 때 요청된 콘텐츠가 로드된 후에 페이드 인됩니다. 반면 NodeBB에서는 다음 콘텐츠가 로드되는 동안 현재 콘텐츠가 페이드 아웃됩니다.
핵심은 링크를 클릭한 직후 Discourse가 현재 HTML을 즉시 제거하지 않도록 하는 방법을 찾아야 한다는 것입니다. HTML은 새 콘텐츠가 로드되어 표시될 준비가 될 때까지(또는 페이드 아웃 효과가 끝날 때까지, 하지만 이것이 더 나은지 확신이 서지 않습니다
) 제자리에 유지되어야 합니다.
음, 알겠습니다. 제가 제공한 내용은 지금 설명하고 계신 것(애니메이션 부분, 프로그래밍 노력은 제외하고)의 50% 정도에 해당합니다. 본질적으로 요청하시는 것은 철거(tear-down)를 지연시키고 스피너를 페이드 아웃으로 대체하는 것입니다. 하지만 다른 시스템에서 실제로 일어나는 것에 대한 전제가 정확하다고는 확신하지 못하겠습니다. 비동기 호출로 데이터를 로드하는 데 걸리는 시간을 예측하는 것은 불가능하므로, 그렇게 보이는 것 같더라도 페이드 아웃이 완벽하게 동기화되지는 않을 것입니다. 화면이 비어 있을 때 짧은 지연이 있는지도 모릅니다. 나머지 부분은 직접 조사해 보시길 권하며, 이는 결코 쉬운 작업이 아닐 것입니다. Discourse의 스피너가 기존 라우트의 끝이 아니라 새 라우트에 나타나기 때문이죠. 수정: 아니요, 그렇지 않습니다. 스피너는 필요할 때 표시되도록 설정된 자체적인 작은 div 안에 있습니다. 추가 참고 사항: 목록 컨테이너는 클릭 동작 직후 숨겨지며, 이는 목록 영역을 즉시 해체하는 것처럼 보입니다(명시적으로 설정한 것은 아니지만, Ember의 암묵적 최적화일 수도 있고 확신은 없습니다). 우선 이 동작을 변경해야 합니다.
물론 미래를 읽지는 못하죠
. NodeBB의 페이드 아웃은 약 200ms인 것 같습니다. 페이지 로딩에 더 시간이 걸리면, 빈 화면을 바라보게 될 것입니다.
그리고 네, 맞아요. 아이디어의 핵심은 스피너를 고정된 시간의 페이드 아웃으로 대체하는 것입니다. ![]()
로딩 시간이 페이드 아웃보다 빠르면, 새 콘텐츠가 표시되도록 페이딩을 중단해야 합니다.
프로그래밍은 제 주된 강점이 아니고 Discourse가 어떻게 작동하는지도 몰라요. 알아낼 수 있을지 확신은 없지만, 한번 살펴볼 가치가 있습니다.
고문과 조언에 감사합니다!