Javascript 使用vanilla js设置声音条的动画

我想要声条效果，即

我希望相应的div（条）像下面的代码片段中那样不精确地增加/减少高度。我想在香草JS中达到同样的效果

我想让他们改变高度随机即5酒吧将改变高度在5个随机的方式

Element.animate（）方法不起作用，我也不允许使用任何外部库或API。我不确定是否使用CSS动画方法

下面编写的代码是用jQuery编写的。我无法在Vanilla JS中破译相同的解决方案

功能波动（条形）{
var振幅=数学随机（）*42；
对数（振幅）；
var高度=振幅*4；
//重复设置均衡器条的动画
制作动画({
高度：高度
}，1000，函数（）{
波动（$（本））；
});
}
$（“.bar”）。每个（功能（i）{
波动（$（本））；
log（$（this））；
});
.inline块包装器{
显示：内联块；
右边距：-4px；
}
.棒材包装机{
背景色：黑色；
高度：160px；
宽度：135px；
显示：块；
位置：相对位置；
}
.酒吧{
/*背景颜色：绿色*/
宽度：100%；
高度：160px；
位置：绝对位置；
左：0px；
底部：0px；
}
.酒吧货柜{
保证金：自动；
宽度：50%；
高度：10雷姆；
边框：15px纯黑；
}
计时器{
显示器：flex；
}
.开始{
显示：内联；
背景颜色：绿色；
右边距：50px；
填充：10px 10px；
颜色：白色；
边界：无；
宽度：100px；
高度：35px；
证明内容：中心；
}
.停下来{
显示：内联；
背景色：红色；
左边距：50像素；
填充：10px 10px；
颜色：白色；
边界：无；
宽度：100px；
高度：35px；
证明内容：中心；
}

开始
Stop
花了很多CSS，但我找到了一个接近我想要的解决方案


var clicks=0
函数波动（）{
单击次数+=1
如果（单击>1）{
停止波动（）
}否则{
document.querySelector（'.div stop'）.classList.toggle（'animate-bar'））
var bar=document.getElementsByClassName（'div-bar'）
}
}
函数{
让计数=1；
设bar=document.getElementsByClassName（'div-bar'）；
用于（钢筋中的钢筋）{
bar.classList.toggle（'paused-bar'）；
}
}
.container{
边框：20px纯黑；
背景色：黑色；
}
.按钮容器{
显示器：flex；
}
.开始{
显示：内联；
背景颜色：绿色；
右边距：50px；
填充：10px 10px；
颜色：白色；
边界：无；
宽度：100px；
高度：35px；
证明内容：中心；
}
.停下来{
显示：内联；
背景色：红色；
左边距：50像素；
填充：10px 10px；
颜色：白色；
边界：无；
宽度：100px；
高度：35px；
证明内容：中心；
}
.驾驶台{
显示器：flex；
对齐项目：居中；
宽度：550px；
高度：150像素；
溢出：隐藏；
}
.div停止div{
弹性：10自动；
身高：100%；
保证金：0；
}
.设置条的动画div{
动画：动画条500毫秒线性无限交替；
变换原点：底部；
}
.动画条div：第一个子项{
左边距：0；
}
.动画条div：最后一个子对象{
右边距：0；
}
.动画条分区：第n个子项（1）{
动画持续时间：2200ms；
动画延迟：9ms；
位置：相对位置；
最高：22%；
}
.动画条分区：第n个子项（2）{
动画持续时间：1500ms；
动画延迟：0毫秒；
位置：相对位置；
最高：33%；
}
.动画条分区：第n个子项（3）{
动画持续时间：1789ms；
动画延迟：5ms；
位置：相对位置；
}
.动画条分区：第n个子项（4）{
动画持续时间：2786ms；
动画延迟：7毫秒；
位置：相对位置；
排名前10%；
}
.动画条分区：第n个子项（5）{
动画持续时间：1659ms；
动画延迟：8ms；
位置：相对位置；
最高：27%；
}
@关键帧为栏设置动画{
0% {
变换：scaleY（0）；
}
100% {
转化：scaleY（100%）；
}
}
身体{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：周围的空间；
}
正文：：之后{
内容：“；
位置：绝对位置；
最高：50%；
右：0；
左：0；
宽度：100%；
高度：1px；
}
.暂停的酒吧{
-webkit动画播放状态：暂停；
动画播放状态：暂停！重要；
}


开始
停止
Hey Shorya您能否添加更多详细信息，说明您希望具体实现的目标以及目前尚未实现的目标？更新问题本身中的相同内容。@LakshyaThakur是的，我更改了概述我想要实现的目标的问题。感谢您指出。您可以使用javascript
classList.add（）
添加具有特定CSS动画的类。可以使用CSS动画关键帧创建一种声条效果。如果你想要真正的随机动画，你可以使用javascript
requestAnimationFrame
来调整每一帧声音条的高度。只是一些提示！阅读有关MDN或W3学校的文档，并尝试一些方法：）