Как закрывать меню по клику на ссылку внутри него в SPA?

Question

[lavezzi1]

Здравствуйте. Есть SPA на vue.js возник такой вопрос. Есть обычный сайдбар который выкатывается справа по клику на гамбургер на мобильных. Нужен такой behavior – человек кликает на гамбургер меню отктрывается (легко) после того, как он кликает на ссылку, происходит переход на страницу и в этот же момент нужно убирать класс с боди чтобы меню закрылась ( в этом месте как раз проблема). Если сделать по обычному, то есть просто ловить клик внутри сайдбара по ссылку и снимать класс то меню закрывается без transition – просто схлопывается и это наверное из за того, что подгружается контент страницы во время клика на ссылку (не уверен). Так как все таки правильно сделать это?

JQuery подобный код (но не jquery). Сделал так – работает. Но не уверен что это по православному.

$('.sidebar__item').on('click', function() {
            setTimeout(function() {
                if ($('body').hasClass('sidebar--open')) {
                    $('body').removeClass('sidebar--open');
                }
            }, 100);
        })

UPDATE
В общем я нашел логичную закономерность. Нет анимация только в том случае, когда меняется layout, то есть вся страница например с /page1 на /page2 не будет анимации. Анимация есть при переходе например /page1/subpage1 или /page2/subpage2.

Есть решение для этого? Опасно ли юзать setTimeout?

Answer 1

[Владимир]

Во первых дело точно не в асинхронности, тайм-аут не причем. А во вторых у вас там какие то крутые css правила на этот класс, можно их тоже в вопрос добавить, потому как ошибка явно где то там, когда вы удаляете класс все правила от него уже не работают, следовательно у вас что-то должно плавно закрывать ваше меню, но я не понимаю что. Добавьте весь css принадлежащий к коду.

Comments

[lavezzi1]

Но ведь без перехода на другую страницу (подгрузку контента) сайдбар закрывается плавно.

[Владимир]

Стоп я не понимать, у вас spa или нет, или конкретно этот переход из сайдбара перегружает страницу. Короче если у вас перегружается страница, о чем мы вообще говорим, она же перегружается, конечно меню тупо исчезнет. Если не перезагружается опишите еще раз свои шаги и ожидкния

[lavezzi1]

Владимир: Да, SPA. Есть layout в котором подгружается только контент. Шапка и сайдбар не меняется, меняется только активный класс пункта меню.

В общем я нашел логичную закономерность. Нет анимация только в том случае, когда меняется layout, то есть вся страница например с /page1 на /page2 не будет анимации. Анимация есть при переходе например /page1/subpage1 или /page2/subpage2.

Есть решение для этого? Опасно ли юзать setTimeout?

Answer 2

[Дмитрий Скрябин]

Не знаю конкретно про vue.js, но вероятно у роутинга есть событие типа onRouteChange, тогда сброс класса можно поставить туда.

Answer 3

[Александр Алексеев]

if ($('body').hasClass('sidebar--open')) {
       $('body').removeClass('sidebar--open');
 }

явно можно сократить до

$('body.sidebar--open').removeClass('sidebar--open');

Answer 4

[napa3um]

Если вы используете vue.js, то управляйте DOM-ом с помощью биндингов, а не с помощью jQuery. Открытость меню должна зависеть от переменной модели вида, которая (модель) должна быть подписана на событие изменение роута, при котором модель сбрасывала бы переменную "открытости" меню.

Comments

[napa3um]

https://vuejs.org/guide/transitions.html - тут пример использования анимации для плавного эффекта изменения состояния.

[lavezzi1]

napa3um: Круто но не понятно. Я пробовал сделать сайдбар с помощью vue но не срослось.

[lavezzi1]

napa3um: Также ни где не нашел примера подобного поведения.

[lavezzi1]

napa3um: и это не jquery

[napa3um]

lavezzi1: пока не срастётся, видимо, ничего не получится. Либо ваше хакерство сломает всю архитектуру приложения. Когда-нибудь.

[napa3um]

lavezzi1: не важно, всё равно "нельзя" общаться с DOM-ом "вручную", в vue.js для этого предназначены биндинги. Нужно мыслить не разметкой, а моделью вида. Заставьте себя.