我有一个在输入焦点上标签的过渡，是否有一种方法可以使该过渡在Blur上向后进行

Question

考虑以下小提琴代码

<div class="my-wrapper">
 <input type="text"
     placeholder="placeholder." >
 <label >Press enter to save</label>
</div>

.my-wrapper {
 input {
  width: 200px;
  height: 3em;
 }
 input:focus + label{
  right: 20px;
  opacity: 1;
  color: #D3D3D3;
 }
 label{
   line-height: 40px;
   position: absolute; 
   right: 160px; 
   -moz-transition: 0.3s right ease;
   -ms-transition: 0.3s right ease;
   -o-transition: 0.3s right ease;
   -webkit-transition: 0.3s right ease;
   transition: 0.3s right ease;
   z-index: 0;
   opacity: 0;
 }
}

我看到了焦点的前进过渡，我以为模糊过渡会倒退，但我看不到它，有人可以给我提示我做错了什么吗？

Answer 1

您可以通过使用transform而不是绝对值

来保持简单

.my-wrapper input {
  width: 200px;
  height: 3em;
}
.my-wrapper input:focus+label {
  transform: translateX(0);
  opacity: 1;
  color: #D3D3D3;
}
.my-wrapper label {
  position: absolute;
  right: 10px;
  line-height: 40px;
  transform: translateX(-20px);
  transition: 0.3s all ease;
  z-index: 0;
  opacity: 0;
}

<div class="my-wrapper">
  <input type="text" placeholder="placeholder.">
  <label>Press enter to save</label>
</div>

Answer 2

您给出了transition: 0.3s right ease，它仅适用于right属性，而不适用于opacity。

将过渡属性更改为 transition: 0.3s all ease，效果在模糊中平稳淡出。

jsfiddle链接