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>

CSS动画 - 动画缩放

1 个答案: