Javascript 尝试在两类CSS/HTML之间切换以获得整洁的动画

如果你想自己想象我的问题，请随意使用这个源代码，我觉得我有点过于复杂了

我知道我可以使用ID单独转换元素，但我正在尝试了解更多的JavaScript，并且觉得这可能是一次转换多个元素时管理代码的最简单和最节省空间的方法

函数bubblefade（）{
var元素=document.getElementsByClassName（“气泡”）；
if（element.getElementsByClassName=“气泡”）{
元素[0]。类列表。替换（“泡泡”、“泡泡”样式）
元素[0]。类列表。替换（“泡泡”、“泡泡”样式）
元素[0]。类列表。替换（“泡泡”、“泡泡”样式）
}否则{
元素[0]。类列表。替换（“bubblefadestyle”、“bubbles”）
元素[0]。类列表。替换（“bubblefadestyle”、“bubbles”）
元素[0]。类列表。替换（“bubblefadestyle”、“bubbles”）
}
}

正文{
填充：0；
保证金：0；
}
#导航栏{
背景色：rgba（0,0,0,0）；
身高：100%；
宽度：120px；
左：0%；
z指数：-1；
过渡：所有1；
}
#标志{
宽度：100px；
高度：100px；
位置：固定；
左：30px；
顶部：30px；
边界半径：50%；
z指数：1；
过渡：均为0.15秒；
}
#标志：悬停{
光标：指针；
转换：比例（1.1）；
}
#徽标：活动{
变换：比例（1）；
过渡：所有0.05秒；
}
.泡泡发型{
宽度：100px；
高度：100px；
左边距：30px；
利润率最高：25%；
背景色：rgba（0,0,255,0）；
边界半径：50%；
过渡：均为0.15秒；
光标：指针；
不透明度：1；
}
.泡泡{
转化：translateX（-100%）；
宽度：100px；
高度：100px；
左边距：30px；
利润率最高：25%；
背景色：rgba（0,0,255,0）；
边界半径：50%；
过渡：均为0.15秒；
光标：指针；
不透明度：0；
}
.气泡：悬停{
转换：比例（1.1）；
}
.气泡：活动{
变换：比例（1）；
过渡：所有0.05秒；
}
#气泡1{
填充顶部：130%；
宽度：100px；
高度：100px；
背景色：rgba（0,0,255,0）；
边界半径：50%；
}

`

您的javascript中有一些小错误，所以我对其进行了一些清理。以下是修订后的相同代码：

函数bubblefade（）{
if（document.getElementsByClassName（“气泡”）[0]！=未定义）{
[…document.getElementsByClassName（“bubbles”）].forEach（element=>element.classList.replace（“bubbles”，“bubblefadestyle”）；
}否则{
[…document.getElementsByClassName（“bubblefadestyle”）].forEach（element=>element.classList.replace（“bubblefadestyle”、“bubbles”）；
}
}

正文{
填充：0；
保证金：0；
}
#导航栏{
背景色：rgba（0,0,0,0）；
身高：100%；
宽度：120px；
左：0%；
z指数：-1；
过渡：所有1；
}
#标志{
宽度：100px；
高度：100px；
位置：固定；
左：30px；
顶部：30px；
边界半径：50%；
z指数：1；
过渡：均为0.15秒；
}
#标志：悬停{
光标：指针；
转换：比例（1.1）；
}
#徽标：活动{
变换：比例（1）；
过渡：所有0.05秒；
}
.泡泡发型{
宽度：100px；
高度：100px；
左边距：30px；
利润率最高：25%；
背景色：rgba（0,0,255,0）；
边界半径：50%；
过渡：均为0.15秒；
光标：指针；
不透明度：1；
}
.泡泡{
转化：translateX（-100%）；
宽度：100px；
高度：100px；
左边距：30px；
利润率最高：25%；
背景色：rgba（0,0,255,0）；
边界半径：50%；
过渡：均为0.15秒；
光标：指针；
不透明度：0；
}
.气泡：悬停{
转换：比例（1.1）；
}
.气泡：活动{
变换：比例（1）；
过渡：所有0.05秒；
}
#气泡1{
填充顶部：130%；
宽度：100px；
高度：100px；
背景色：rgba（0,0,255,0）；
边界半径：50%；
}