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