jquery - 如何获取输入集以显示 block 以使用 css 淡入

Question

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

此外，在我的示例中是否有办法让标签/输入显示 block ，以便标签位于输入上方并且它们位于页面中心？

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”上将“动画”更改为“过渡”

    .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