Javascript 如何使用Vue/Velocity更改动画分割宽度？

这个问题的标题可能过于简单化了我想要实现的目标，或者我没有从一个好的角度来看待这个问题。我有一个侧边导航，我希望用户能够折叠和扩展，但在这两种情况下，它仍然显示，只是一个不同的宽度

加载侧栏时，每个导航项都有一个徽标和标题。当您“折叠”菜单时，标题应消失，但徽标仍保留。折叠时显示/隐藏标题很简单，但设置动画有点棘手

我的第一种方法是全部使用css，它很有效，但感觉不是很流畅，所以我决定使用

velocity动画库。这似乎根本不起作用。我使用的是Vue路由器，这些导航项是从循环生成的路由器链接。下面是代码的样子

<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>

动画似乎不起作用。折叠/展开本身按预期工作，但没有动画，而且序列中实际上有一点小故障。我如何才能让这个动画工作？
请尽量让这个问题更加集中-把它精简到基本的、具体的问题。问题是关于Vue还是CSS动画@AlexMA为没有说得更清楚而道歉。我想使用velocity动画库使其发挥作用，但是，我愿意接受任何其他解决方案，以便在不完全隐藏作为动画一部分的元素时，平滑地更改元素的宽度。请尝试使这个问题更加集中-将其精简到其基本的、特定的问题。问题是关于Vue还是CSS动画@AlexMA为没有说得更清楚而道歉。我想使用velocity动画库使其正常工作，但是，当不完全隐藏作为动画一部分的元素时，我愿意使用任何其他解决方案来平滑地更改元素的宽度
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 }
  )
}