Javascript 过渡后如何调整截面边距

我有一个div，它在Y轴上以100px的速度转换。我希望我的蓝色div

#home-section3

在过渡后没有任何来自

.home-section2

的上边距，但理想情况下，我不想为过渡div下面的每个div都将边距顶部设置为

-100px

。是否有其他方法可以使过渡完成后不出现空白间隙

功能部分2延迟（）{
$（'.home-section2'）.addClass（'fadeDisplay'）；
};
设置超时（第2节延迟，300）
.home-section 2{
显示：内联块；
宽度：50%；
高度：300px；
垂直对齐：顶部；
边缘顶部：100px；
不透明度：0；
过渡：1s；
-webkit转换：1s；
背景：绿色；
}
.home-SECTION 2.fadeDisplay{
转换：translateY（-100px）；
-webkit转换：translateY（-100px）；
过渡：1s；
-webkit转换：1s；
不透明度：1；
}
#主场3{
宽度：100%；
最大宽度：100%；
高度：自动；
背景：#094765；
填充：50px0；
}
在类中添加
页边距底部：-100px
。fadeDisplay

功能部分2延迟（）{
$（'.home-section2'）.addClass（'fadeDisplay'）；
};
设置超时（第2节延迟，300）
.home-section 2{
显示：内联块；
宽度：50%；
高度：300px；
垂直对齐：顶部；
边缘顶部：100px；
不透明度：0；
过渡：1s；
-webkit转换：1s；
背景：绿色；
}
.home-SECTION 2.fadeDisplay{
转换：translateY（-100px）；
-webkit转换：translateY（-100px）；
过渡：1s；
-webkit转换：1s；
不透明度：1；
裕度：0-100px0；
}
#主场3{
宽度：100%；
最大宽度：100%；
高度：自动；
背景：#094765；
填充：50px0；
}
在类中添加
页边距底部：-100px
。fadeDisplay

功能部分2延迟（）{
$（'.home-section2'）.addClass（'fadeDisplay'）；
};
设置超时（第2节延迟，300）
.home-section 2{
显示：内联块；
宽度：50%；
高度：300px；
垂直对齐：顶部；
边缘顶部：100px；
不透明度：0；
过渡：1s；
-webkit转换：1s；
背景：绿色；
}
.home-SECTION 2.fadeDisplay{
转换：translateY（-100px）；
-webkit转换：translateY（-100px）；
过渡：1s；
-webkit转换：1s；
不透明度：1；
裕度：0-100px0；
}
#主场3{
宽度：100%；
最大宽度：100%；
高度：自动；
背景：#094765；
填充：50px0；
}
您可能可以使用
边距顶部
而不是
变换

.fadeDisplay {
  margin-top: 0;
}


事实上，整个动画只能用CSS完成

.home-section2 {
  margin-top: 100px;
  opacity: 0;
  animation: ani 2s forwards;
}

@keyframes ani {
  to {
    margin-top: 0;
    opacity: 1;
  }
}

您可能可以使用
边距顶部
而不是
变换

.fadeDisplay {
  margin-top: 0;
}


事实上，整个动画只能用CSS完成

.home-section2 {
  margin-top: 100px;
  opacity: 0;
  animation: ani 2s forwards;
}

@keyframes ani {
  to {
    margin-top: 0;
    opacity: 1;
  }
}

谢谢！我甚至没有想到这个方法。谢谢，谢谢！我甚至没有想到这个方法。我很感激。