如何将输入设置为显示块以 css 淡入

Question

我被卡住了，并四处寻找解决方案。在页面加载时，我有我的输入 opacity: 0 然后完全不透明，但我需要输入显示为块，以便它们在页面下方而不是内联。这样做可以抵消我使用 .block class 时的淡入淡出。无论如何，我可以让输入以块的形式出现，并且仍然以 css 淡入吗？

此外，在我的示例中有没有办法让 labels/inputs 显示块，以便标签位于输入上方并且它们位于页面中央？

This fiddle demonstrates it best

$(function() {
  var elems = $('.intro input').on('keypress', function() {

    if ($(this).val().trim().length > 2) {
      $(this).parent().next('label').addClass('block');
    }


    $('#intro-button').toggle(
      elems.filter(function() {
        return this.value.trim() !== "";
      }).length === elems.length
    )

  });
});

.intro {
 opacity: 0;
}
.info-input {
 padding: 10px 15px;
 margin: 40px auto;
}
.intro:first-child {
 display: block;
 opacity: 1;
}
.block {
 display: block;
 visability: visible;
 opacity: 1;
   -webkit-animation: fadein 1s ease-in;
   -moz-animation: fadein 1s ease-in;
    animation: fadein 1s ease-in;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="intro">What is your name?
    <input id="name" type="text" class="info-input">
   </label>
   <label class="intro">What is your email address?
    <input id="email" type="email" class="info-input">
   </label> 
   <label class="intro">What is your title?
    <input id="title" type="text" class="info-input">
   </label>

Answer 1

将“.block”上的 "animation" 更改为 "transition"

    .block {
      display: block;
      visability: visible;
      opacity: 1;
      -webkit-transition: opacity 1s ease-in;
      -moz-transition: opacity 1s ease-in;
      transition: opacity 1s ease-in;
    }

fiddle

Answer 2

可以用CSS中的动画道具来做。像这样：

@-webkit-keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.your-div {
  display: none;
}
.your-div.show {
  display: block;
  -webkit-animation: fade-in 0.2s;
  -moz-animation: fade-in 0.2s;
  -o-animation: fade-in 0.2s;
  animation: fade-in 0.2s;
}

如何将输入设置为显示块以 css 淡入

How to get an input set to display block to fade in with css

html

css

jquery

fadein