CSS动画-缩放动画

Question

我有一个带有两个div的HTML页面。divs表示向导中的步骤。在用户完成第一步之后，我希望第二步从屏幕上放大。从表面上看，它自然地把第一步推下去了。用户在第一步中输入的信息将出现在第二步下面。

我创建了一个JSFiddle 这里。我的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>

​