如何通过 js 的方式控制 css 播放动画？

[LeeReamond]

想要实现的效果：侧边栏收纳起来的时候显示小图标，展开的时候显示大图标，两者大小不同，通过动画平滑过度。

纯 css 的方式实现比较简单，比如类似以下实现，可以做到鼠标放上去的时候平滑动画过度

.cls {
  height: 40px;
  transition: .5s linear;
}
.cls: hover {
  height: 80px
}

目前的问题在于组件比较复杂，侧边栏的展开与否不是通过悬停实现的，而是通过 js 控制唤醒的。我使用的是 vue3 框架，在这种情况下如果要实现侧边栏展开前后 cls 高度变化，一般是写作两个类，比如

<div :class="{'cls': !expanded, 'cls-hover': expanded}" />

这样就可以把组件的高度绑定到 js 变量 expanded 上。但是发现一个问题是这么搞的话因为它属于两个类，所以没法利用 transition 的动画变化了，过渡非常生硬。有啥解决方案吗？

[wdssmq]

可以追加一个类，而不是切换，.cls.hover {}