Fix sidebar-dimmer animation

This commit is contained in:
Mimi 2026-08-14 17:39:50 +08:00
parent 66e3095a31
commit 6560fa6dd6
2 changed files with 5 additions and 2 deletions

View File

@ -6,7 +6,6 @@
<span class="toggle-line"></span> <span class="toggle-line"></span>
<span class="toggle-line"></span> <span class="toggle-line"></span>
</div> </div>
<div class="sidebar-dimmer"></div>
{%- endif %} {%- endif %}
{%- if theme.back2top.enable and not theme.back2top.sidebar %} {%- if theme.back2top.enable and not theme.back2top.sidebar %}

View File

@ -3,13 +3,17 @@
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const isRight = CONFIG.sidebar.position === 'right'; const isRight = CONFIG.sidebar.position === 'right';
// Create the dimmer dynamically to prevent an unwanted animation before main.css is applied.
const sidebarDimmer = document.createElement('div');
sidebarDimmer.className = 'sidebar-dimmer';
document.body.appendChild(sidebarDimmer);
const sidebarToggleMotion = { const sidebarToggleMotion = {
mouse: {}, mouse: {},
init() { init() {
window.addEventListener('mousedown', this.mousedownHandler.bind(this)); window.addEventListener('mousedown', this.mousedownHandler.bind(this));
window.addEventListener('mouseup', this.mouseupHandler.bind(this)); window.addEventListener('mouseup', this.mouseupHandler.bind(this));
document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this)); sidebarDimmer.addEventListener('click', this.clickHandler.bind(this));
document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this)); document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this));
window.addEventListener('sidebar:show', this.showSidebar); window.addEventListener('sidebar:show', this.showSidebar);
window.addEventListener('sidebar:hide', this.hideSidebar); window.addEventListener('sidebar:hide', this.hideSidebar);