Javascript 按特定顺序设置divs变换的动画

我正在设计一个显示不同项目的网页，每个项目都有一个缩略图，可以是屏幕宽度的50%或100%，每当我点击一个缩略图时，我想把它放大，改变背景，显示与项目相关的更具体的信息

我制作了这个简单的动画来解释我想要实现的目标：

打开一个项目

结束项目
这是我的尝试，问题是当项目结束并返回到一半大小的缩略图时，我无法实现平滑的移动（而且我希望相邻的两个半div的高度相同），您能帮助理解如何实现吗

var proj1open=false；
$（文档）.ready（函数（）{
$（“#项目-1 h1”）。单击（函数（）{
如果（！proj1open）{
$（“#项目-1”）.addClass（“开放项目”）；
$（“#proj-2”）.css（{宽度：“100%”）；
proj1open=true；
}否则{
$（“#项目-1”）.removeClass（“开放项目”）；
$（“#proj-2”）.css（{宽度：“50%”）；
proj1open=false；
}
});
});
。工作容器{
保证金：0；
填充：0；
宽度：100vw；
位置：相对位置；
高度：自动；
框大小：边框框；
显示器：flex；
柔性包装：包装；
}
.row项目{
保证金：0；
填充：0；
宽度：100vw；
身高：100%；
位置：相对位置；
}
.项目页面{
填充：70px 200px 120px 50px；
框大小：边框框；
-webkit过渡：所有.3s易于输入输出；
-moz转换：所有.3轻松输入输出；
-o型转换：所有.3s易于输入输出；
过渡：所有.3s易于输入输出；
}
.拇指一半{
宽度：50%；
高度：自动；
-webkit过渡：所有.5s轻松输入输出！重要；
-moz过渡：所有.5s轻松输入输出！重要；
-o型过渡：全部。5秒轻松进出！重要；
过渡：所有。5s轻松进出！重要；
}
.拇指满{
宽度：100%；
高度：自动；
-webkit过渡：所有.5s轻松输入输出！重要；
-moz过渡：所有.5s轻松输入输出！重要；
-o型过渡：全部。5秒轻松进出！重要；
过渡：所有。5s轻松进出！重要；
}
#项目-1{
背景色：#9c1006；
浮动：左；
}
#项目-2{
背景色：#fff15f；
浮动：对；
}
#项目-3{
背景色：#006f9e；
}
#项目-4{
背景色：#afd39a；
}
.开放项目{
高度：100vh；
宽度：100%；
背景色：白色！重要；
-webkit过渡：所有.5s轻松输入输出！重要；
-moz过渡：所有.5s轻松输入输出！重要；
-o型过渡：全部。5秒轻松进出！重要；
过渡：所有。5s轻松进出！重要；
}

标题
副标题
标题
副标题
副标题
标题
副标题
标题
副标题