Всем привет Подскажите, пожалуйста, как лучше сделать. Задача стоит - скрывать

Question

Всем привет Подскажите, пожалуйста, как лучше сделать. Задача стоит - скрывать

сайдбар по клику. Я сделал по типу hideSidebar = !hideSidebar. И при клике, часть элементов должны скрываться, а сам сайдбар становиться уже. Все работает хорошо, но вот когда я тыкаю кнопку чтобы открыть его обратно - элементы резко появляются, и в то время пока сайдбар разьезжается обратно по ширине его колбасит из-за того что элементам тесно пока он не наберет свою ширину. Я хочу чтобы эти элементы не сразу появились, а когда сайдбар уже станет широким, для этого походу надо использовать <transition>. Но тыкать по файлу во всех местах где это надо - засорять файл одним и тем же кодом.

Отсюда вопрос - как сделать так, чтобы разово прописать, например, родителю, <transition>, внутри которого все v-if примут его значения?

#frontend #javascript #programming #russian #vue.js

0

02.09.2021

4 ответов

19 просмотров

Pavel Karpushevskiy Автор вопроса

tumasov
вероятно <transition-group> но ты можешь на прост...

Пробовал <transition-group> на общий блок - просто пропадает весь контент и все. Может допустил ошибку, но делал по документации все. Просто в документации даже нет такого же варианта как и у меня. Там либо список, либо подряд идущие блоки v-if. А у меня большая структура, местами вообще отдельные компоненты, и к разным элементам применен v-if. Как каким то нет, к каким-то да

0

02.09.2021

tumasov

Pavel Karpushevskiy
Пробовал <transition-group> на общий блок - прост...

мне бы было проще добавлять класс по setTimeout к родителю, а от родителя всем дочерним классам менять opacity 1. нажал открыть 2. сайдбар открывается за 300 милисекунд 3. сетТаймаут отрабатывает через 300 милисекунд и добавляет класс к сайдбару 4. все дети сайдбара по добавлению класса меняют опасити с 0 на 1

0

02.09.2021

Pavel Karpushevskiy Автор вопроса

tumasov
мне бы было проще добавлять класс по setTimeout к ...

Согласен, я тоже думал об этом, просто охота точно понимать что по "канонам" сделать не получится)) Спасибо за совет)

0

02.09.2021

tumasov · Accepted Answer

вероятно <transition-group> но ты можешь на простых css транзишенах в принципе это сделать — у тебя там прописывается время в милисекундах которое нужно на полное открытие сайдбара, дальше по сетТаймауту например в милисекундах добавляй класс родителю который будет всем дочерним элементам opacity: 0 в opacity: 1 можно этот же подход применить к <transition-group>

169 похожих чатов

Всем привет Подскажите, пожалуйста, как лучше сделать. Задача стоит - скрывать

4 ответов

Похожие вопросы