Возможно, заголовок этого вопроса слишком упрощает то, что я пытаюсь выполнить sh, или, возможно, я не смотрю на это с хорошей точки зрения. У меня есть боковая навигация, которую я хочу, чтобы пользователи могли свернуть и развернуть, но в любом случае она все еще отображается, просто с другой шириной.
Когда загружена боковая панель, каждый элемент навигации имеет go и заголовок. Когда вы «свернете» меню, заголовок должен исчезнуть, но lo go останется. Показывать / скрывать заголовок при свертывании просто, но оживить его немного сложно.
Мой первый подход был css, и он работал, но не очень гладко, поэтому я решил обратиться к библиотеке velocity-animate. Это не похоже на работу вообще. Я использую маршрутизатор Vue, и эти элементы навигации являются ссылками маршрутизатора, сгенерированными из al oop. Вот как выглядит код
<router-link to="{{ $tool->menu() }}">
<div class="sidebar-tool-icon-container">
{{ $tool::icon() }}
</div>
<transition-group
tag="div"
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
:css="false"
>
<div class="sidebar-tool-title-container" v-if="!collapsed" :key="{{ $key }}">
<h3>{{ $tool->displayName }}</h3>
</div>
</transition-group>
</router-link>
Свойство collapse переключается, когда пользователь нажимает «свернуть / развернуть». Вот мой javascript, который должен управлять анимацией:
beforeEnter(el) {
el.style.opacity = 1;
el.style.width = '3em';
},
enter(el, done) {
Velocity(
el,
{ opacity: 1, width: '10em' },
{ duration: 500, easing: 'easeInCubic', complete: done }
)
},
leave(el, done) {
Velocity(
el,
{ opacity: 1, width: '3em' },
{ duration: 500, easing: 'easeOutCubic', complete: done }
)
}
Кажется, анимация не работает. Сам по себе коллапс / расширение работает, как и ожидалось, но анимации нет, и в последовательности есть небольшая ошибка. Как мне заставить эту анимацию работать?