Javascript 使用translateY（）移动隐藏元素而不留空格

我想创建一个动画，在用户单击某个元素时显示某个部分。加载页面时，该部分保持隐藏状态（

translateY（-700px）

）。单击“事件更改”（event changes）切换类

。\u active

在

页边距底部使用transition属性会导致动画上的FPS计数较低

问题:
有没有办法在不隐藏空白的情况下动画这个部分？

下面部分的SASS代码

.section {
  padding: 50px 0 20px 0;
  background-color: black;
  display: block;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05);
  transform: translateY(-700px);
  transition: transform 1s;

  &._active {
    transform: translate(0, 0);
    margin-bottom: 0;
  }
}

当您使用
translate
时，浏览器会记住样式化元素的实际大小。如果您可以删除
填充
，接近它的一个选项是转换
高度
，同时转换
translateY
：


var-toggler=document.getElementById（“toggler”）；
var toggled=document.getElementById（“toggled”）；
toggler.addEventListener（“单击”，e=>{
toggled.classList.toggle（“U活动”）；
})
部分{
/*填充：50px 0 20px 0*/
背景色：黑色；
颜色：白色；
显示：块；
身高：0；
盒影：0 4px15px 0 rgba（0,0,0,0.05）；
转换：translateY（-700px）；
-webkit转换：translateY（-700px）；
转换：转换1s，高度1s；
-webkit转换：转换1s，高度1s；
}
.节。\ u激活{
变换：平移（0,0）；
页边距底部：0；
高度：130px；/*根据您的分区内容进行调整*/
}
切换可见性

我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是

事实上，我已经明白了

使用
height
和
margin bottom
属性会导致动画的中断。唯一的方法（我在这种情况下遇到的）是对所有必须随要显示的元素一起移动的元素使用
transform:translateY（）

因此，我在网页的每个部分都添加了另一个类，并更改了它的
transform
属性。通过这种方式，我获得了我想要的平滑动画：）。请告诉我有没有更好的办法


$（“#面板”）。在（'click'，function（）上{
$（'.new class'）。toggleClass（'down'）；
$（'.advanced search'）。切换类（“U活动”）；
});
.hero{
高度：700px；
背景色：#FFD400；
位置：相对位置；
z指数：2；
}
#面板{
宽度：100%；
颜色：白色；
背景：#2E294E；
字体大小：粗体；
字体系列：Helvetica，无衬线；
文本对齐：居中；
填充：30px0；
位置：相对位置；
z指数：2；
}
.高级搜索{
高度：700px；
显示：块；
宽度：100%；
背景#D90368；
文本对齐：居中；
边缘底部：-700px；
转换：translateY（-700px）；
转变：转变1s；
}
.新班级{
背景色：#F1E9DA；
高度：300px；
宽度：100%；
边框：1px纯白；
文本对齐：居中；
字体系列：Helvetica，无衬线；
转变：转变1s；
}
.新的头等舱{
变换：translateY（700px）；
}
.高级搜索。\u处于活动状态{
变换：translateY（0px）；
}

点击显示
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
不使用
翻译
。这完全是一种视觉效果。元素实际上没有移动…它只是看起来像它。你可能想要负利润。A将非常有用。请参阅-如果您想继续使用“平移”，一个选项可能是同时转换“高度”属性：我尝试了负边距和“高度”属性-问题是这会导致动画的帧率非常低（我需要同时移动包含大量内容的其他部分）。我尝试使用jQuery动画和CSS转换-效果相同：）