Question

这是我的代码，我试图在输入框聚焦时使标签浮动，这类似于角度材质动画。我成功地使用了逻辑，但动画似乎没有用。

我使用纯CSS和HTML。

＆＃13;

.space {
  padding: 5px;
  margin-top: 30px;
}
.space .form_input {
  display: inline-block;
}
.space .form_input input {
  border: none;
  border-bottom: solid thin #d6d6d6;
  background: none;
  position: absolute;
  box-shadow: initial;
}
.space .form_input input:focus {
  border: none;
  border-bottom: solid thin #d6d6d6;
  outline: none;
}
.space .form_input input:focus + label {
  transition: all 0.7s ease-out;
  top: -20px;
}
.space .form_input input:valid + label {
  top: -20px;
}
.space .form_input input[value=""] + label {
  border: green;
}
.space .form_input input ~ label {
  -webkit-transition: all 0.7s ease-out;
  -moz-transition: all 0.7s ease-out;
  -ms-transition: all 0.7s ease-out;
  -o-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
  pointer-events: none;
  color: red;
  position: relative;
}

＆＃13;

<form class='space'>
	<div class='form_input'>
		<input name='email' id='email' required>
		<label for='email'> Email: </label>
	</div>
</form>

＆＃13;

Answer 1

编织： http://kodeweave.sourceforge.net/editor/#f364e158b2c7212831b82ef2a8460f93

这是另一种方式。您可以display将标签block element作为transform并使用Prefix-Free移动它。

注意：我正在使用Normalize，因此您无需在CSS中调用供应商前缀。（以及用于CSS跨浏览器兼容性的https://api.twitter.com/oauth2/token）

＆＃13;

.space {
  padding: 5px;
  margin-top: 30px;
}
.space .form_input {
  display: inline-block;
}
.space .form_input input {
  border: none;
  border-bottom: solid thin #d6d6d6;
  background: none;
  position: absolute;
  box-shadow: initial;
  transition: all 0.7s ease-out;
}
.space .form_input input ~ label {
  transition: all 0.7s ease-out;
  pointer-events: none;
  color: red;
  position: relative;
  display: block;
}
.space .form_input input:focus {
  border: none;
  border-bottom: solid thin #d6d6d6;
  outline: none;
}
.space .form_input input:focus ~ label {
  transform: translate(0,-20px);
}
.space .form_input input:valid + label {
  top: -20px;
}
.space .form_input input[value=""] + label {
  border: green;
}

＆＃13;

<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/>
<script src="https://leaverou.github.io/prefixfree/prefixfree.js"></script>

<form class="space">
  <div class="form_input">
    <input id="email" name="email" required="" />
    <label for="email"> Email: </label>
  </div>
</form>

＆＃13;

Answer 2

您必须使用...

定义动画的初始位置（无焦点）

.space .form_input input ~ label {top: 0;}

.space {
  padding: 5px;
  margin-top: 30px;
}
.space .form_input {
  display: inline-block;
}

.space .form_input input {
  border: none;
  border-bottom: solid thin #d6d6d6;
  background: none;
  position: absolute;
  box-shadow: initial;
}
.space .form_input input:focus {
  border: none;
  border-bottom: solid thin #d6d6d6;
  outline: none;
}
.space .form_input input:focus + label {
  transition: all 0.7s ease-out;
  top: -20px;
}
.space .form_input input:valid + label {
  top: -20px;
}
.space .form_input input[value=""] + label {
  border: green;
}
.space .form_input input ~ label {
  transition: all 0.7s ease-out;
  pointer-events: none;
  color: red;
  position: relative;
  top: 0;
}

<script src="https://leaverou.github.io/prefixfree/prefixfree.js"></script>

<form class="space">
  <div class="form_input">
    <input id="email" name="email" required="" />
    <label for="email"> Email: </label>
  </div>
</form>

CSS过渡动画不起作用

2 个答案: