Javascript 使用CSS同时触发多个动画和形状更改

我正在尝试创建一个网站，它的主页是一个巨大的垂直导航栏，带有随窗口的高度和宽度缩放的按钮。单击一个按钮时，我希望其他按钮垂直向下缩放，同时从单击的按钮扩展一个新部分。基本上，当在站点上扩展一个新分区时，我希望其他按钮收缩，以便为新分区留出空间，并允许按钮保持在浏览器窗口的整体高度内

我已经知道了如何收缩按钮和扩展一个新的部分，但是我很难同时做这两件事，也很难将收缩动画应用到页面上除一个按钮之外的所有按钮

我目前得到的：

HTML:

---

我是否需要使用Javascript来实现类似的功能

您最好的选择可能是使用flex设计

它将使元素之间的关系自动化

此外，如果使用这些类避免重复相同的样式，则可以节省大量工作

一种可能性

html，正文{
填充：0px；
边际：0px；
}
#主要{
高度：100vh；
宽度：100%；
背景：灰色；
显示器：flex；
弯曲方向：立柱；
}
/*标志部分*/
.按钮标志{
显示：块；
宽度：100%；
身高：20%；
背景：#EB008B；
文字装饰：无；
文本对齐：居中；
}
/*演讲区*/
.我是巴顿{
显示：块；
宽度：100%；
身高：20%；
背景#EF2C78；
文字装饰：无；
文本对齐：居中；
}
/*写作部分*/
.按钮书写{
显示：块；
宽度：100%；
身高：20%；
背景：#F35866；
文字装饰：无；
文本对齐：居中；
}
/*关于部分*/
.按钮{
显示：块；
宽度：100%；
身高：20%；
背景:#F68353；
文字装饰：无；
文本对齐：居中；
}
/*接触段*/
.按钮触点{
显示：块；
宽度：100%；
身高：20%；
背景：#FAAF40；
文字装饰：无；
文本对齐：居中；
}
.科{
弹性：20%11；
过渡：flex 1s；
背景：黑色；
}
.章节：目标{
弹性：40%11；
}

<div id="main">
  <a href="#logo" id="logo" class="button-logo">Header logo</a>

<a href="#sectionspeaking" id="speaking" class="button-speaking">Speaking button</a>
 <a id="sectionspeaking" class="section-speaking"></a>

<a href="#sectionwriting" id="writing" class="button-writing">Writing button</a>
 <a id="sectionwriting" class="section-writing"></a>

<a href="#sectionabout" id="about" class="button-about">About button</a>
 <a id="sectionabout" class="section-about"></a>

<a href="#sectioncontact" id="contact" class="button-contact">Contact button</a>
 <a id="sectioncontact" class="section-contact"></a>

</div>

 html, body {
 padding: 0px;
 margin: 0px;
}

#main {
 height: 100vh;
 width: 100%;
 background: gray;
}

/* Logo section */

.button-logo {
 display: block;
 width: 100%;
 height: 20%;
 background: #EB008B;

 text-decoration: none;
 text-align: center;

 transition: height 1s ease;
}

.button-logo:target {
 height: 5%;
}

/* Speaking section */

.button-speaking {
 display: block;
 width: 100%;
 height: 20%;
 background: #EF2C78;

 text-decoration: none;
 text-align: center;
}

.section-speaking {
 display: block;
 width: 100%;
 height: 0%;
 background: black;

 transition: height 1s ease;
}

.section-speaking:target {
 height: 20%;
}

/* Writing section */

.button-writing {
 display: block;
 width: 100%;
 height: 20%;
 background: #F35866;

 text-decoration: none;
 text-align: center;
}

.section-writing {
 display: block;
 width: 100%;
 height: 0%;
 background: black;

 transition: height 1s ease;
}

.section-writing:target {
 height: 20%;

 transition: height 1s ease;
}

/* About section */

.button-about {
 display: block;
 width: 100%;
 height: 20%;
 background: #F68353;

 text-decoration: none;
 text-align: center;
}

.section-about {
 display: block;
 width: 100%;
 height: 0%;
 background: black;

 transition: height 1s ease;
}

.section-about:target {
 height: 20%;

 transition: height 1s ease;
}

/* Contact section */

.button-contact {
 display: block;
 width: 100%;
 height: 20%;
 background: #FAAF40;

 text-decoration: none;
 text-align: center;
}

.section-contact {
 display: block;
 width: 100%;
 height: 0%;
 background: black;

 transition: height 1s ease;
}

.section-contact:target {
 height: 20%;

 transition: height 1s ease;
}