Question

我陷入困境，并为此寻找解决方案。在页面加载时，我有输入opacity: 0，然后是完全不透明度，但我需要输入显示为块，以便它们沿着页面而不是内联。这样做可以抵消.block类的淡化。无论如何，我可以让输入以块状方式进行，并且仍然可以用css淡入淡出？

此外，在我的示例中是否有一种方法可以将标签/输入设置为显示块，以便标签位于输入上方并且它们位于页面的中心位置？

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

改变＆＃34;动画＆＃34;到＆＃34;过渡＆＃34; on＆＃34; .block＆＃34;

    .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中的动画道具。像这样：

＆＃13;

@-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;
}

＆＃13;

如何使用css

2 个答案: