CSS 动画 - 缩放动画

Question

我有一个包含两个 div 的 HTML 页面。 div 代表向导中的步骤。用户完成第一步后，我想让第二步从屏幕上放大。看起来，它自然会把第一步往下推。用户在第一步输入的信息会出现在第二步的下方。

我创建了一个 JSFiddle here .我的 CSS 动画定义如下:

.first-initial {
  transition: all 1.0s ease;
}
.first-animation {
  padding-left:3rem;
  padding-right:3rem;
}

.second-initial {
  transform: scaleY(0);
  opacity: 0;
  display: none;
}

.second-animation {
  -webkit-animation-name: zoomIn;
  -webkit-animation-delay: 1.0s;

  animation-name: zoomIn;
  animation-delay: 1.0s;
}        

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

我的问题是 display 属性。我无法为 display 属性设置动画。但是，如果我没有将 display 属性设置为 none，则第一步的定位不正确。随着第二步的增长，我如何自然地将第一步向下推？

Answer 1

我不是很明白......你需要在点击“下一步按钮”后显示下一个输入对吗？看看是不是你想要的:

$('.next').click(function() {
  var box = $(this).parents('.box').attr('data-box');
  $('[data-box="' + (Number(box) + 1) + '"]').slideDown(400);
});

$('.send').click(function() {
  $('.message').slideDown(400)
});

.box {
  display: none;
}
.active {
  display: block;
}
label {
  display: block;
}
.message {
  display: none;
  padding: 10px;
  border: 1px solid green;
  background: #EFE;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container-toggle">
  <div class="message">Thanks!</div>

  <div class="box" data-box="4">
    <label>Address</label>
    <input type="text" />
    <button class="send">Next</button>
  </div>

  <div class="box" data-box="3">
    <label>Phone</label>
    <input type="text" />
    <button class="next">Next</button>
  </div>

  <div class="box" data-box="2">
    <label>Name</label>
    <input type="text" />
    <button class="next">Next</button>
  </div>

  <div class="box active" data-box="1">
    <label>Email</label>
    <input type="email" />
    <button class="next">Next</button>
  </div>
</div>