Question

考虑以下fiddle code

<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属性更改为transition: 0.3s all ease，效果在模糊时会平滑淡出。

JsFiddle link

我对输入焦点的标签有一个过渡，是否有办法使过渡在模糊时向后移动？

2 个答案: