过渡后如何调整部分边距

Question

我有一个div在Y轴上过渡100px。我希望我的蓝色div #home-section3在转换后没有来自.home-section2的任何上边距，但理想情况下我不想为每个div设置margin-top为-100px在转换div下面。在转换完成后，我是否有不同的方式可以让空白区间出现？

Here is a fiddle.

function section2Delays() {
  $('.home-section2').addClass('fadeDisplay');
};
setTimeout(section2Delays, 300);

.home-section2 {
  display: inline-block;
  width: 50%;
  height: 300px;
  vertical-align: top;
  margin-top: 100px;
  opacity: 0;
  transition: 1s;
  -webkit-transition: 1s;
  background: green;
}

.home-section2.fadeDisplay {
  transform: translateY(-100px);
  -webkit-transform: translateY(-100px);
  transition: 1s;
  -webkit-transition: 1s;
  opacity: 1;
}

#home-section3 {
  width: 100%;
  max-width: 100%;
  height: auto;
  background: #094765;
  padding: 50px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="home-section2"></div>
<section id="home-section3"></section>

Answer 1

在课程margin-bottom:-100px

中添加.fadeDisplay

function section2Delays() {
  $('.home-section2').addClass('fadeDisplay');
};
setTimeout(section2Delays, 300);

.home-section2 {
  display: inline-block;
  width: 50%;
  height: 300px;
  vertical-align: top;
  margin-top: 100px;
  opacity: 0;
  transition: 1s;
  -webkit-transition: 1s;
  background: green;
}

.home-section2.fadeDisplay {
  transform: translateY(-100px);
  -webkit-transform: translateY(-100px);
  transition: 1s;
  -webkit-transition: 1s;
  opacity: 1;
  margin:0 0 -100px 0 ;
}

#home-section3 {
  width: 100%;
  max-width: 100%;
  height: auto;
  background: #094765;
  padding: 50px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="home-section2"></div>
<section id="home-section3"></section>

Answer 2

您可以使用margin-top代替transform。

.fadeDisplay {
  margin-top: 0;
}

<强> jsFiddle

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

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

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

<强> jsFiddle