[程序员] 如何通过 js 的方式控制 css 播放动画?

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

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

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

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

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

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

发表回复

您的电子邮箱地址不会被公开。