这是一个创建于 850 天前的主题，其中的信息可能已经有所发展或是发生改变。
想要实现的效果：侧边栏收纳起来的时候显示小图标，展开的时候显示大图标，两者大小不同，通过动画平滑过度。
纯 css 的方式实现比较简单，比如类似以下实现，可以做到鼠标放上去的时候平滑动画过度
.cls {
height: 40px;
transition: .5s linear;
}
.cls: hover {
height: 80px
}
目前的问题在于组件比较复杂，侧边栏的展开与否不是通过悬停实现的，而是通过 js 控制唤醒的。我使用的是 vue3 框架，在这种情况下如果要实现侧边栏展开前后 cls 高度变化，一般是写作两个类，比如
<div :class="{'cls': !expanded, 'cls-hover': expanded}" />
这样就可以把组件的高度绑定到 js 变量 expanded 上。但是发现一个问题是这么搞的话因为它属于两个类，所以没法利用 transition 的动画变化了，过渡非常生硬。有啥解决方案吗？
Select Language