在输入的活动状态下具有标签转变的意外行为

Question

为什么left:0上的标签绝对定位时，标签上会有缝隙？

尝试重新创建类似于Material design的UI。我尝试使用translateY(-6px)或其他方法，但这对于具有更多字符的标签来说并不是动态的。

.formField {
  position: relative;
  height: 40px;
}

.form {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 40px;
}

.label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 24px) scale(1);
  transition: all .3s ease-in;
}

input {
  position: absolute;
  bottom: 0;
  left: 0;
}

input:focus+.label {
  transform: translate(0, 1.5px) scale(.75);
}

<div class="formField">
  <form class="form">
    <input type="text" class="name" />
    <label for="name" class="label">Hello</label>
  </form>
</div>

Answer 1

  

默认情况下，变换的原点是“ 50％50％”，恰好在任何给定元素的中心。

尝试将transform-origin: bottom left;添加到您的.label

.formField {
  position: relative;
  height: 40px;
}

.form {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 40px;
}

.label {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: bottom left;
  transform: translate(0, 24px) scale(1);
  transition: all .3s ease-in;
}

input {
  position: absolute;
  bottom: 0;
  left: 0;
}

input:focus+.label {
  transform: translate(0, 1.5px) scale(.75);
}

<div class="formField">
  <form class="form">
    <input type="text" class="name" />
    <label for="name" class="label">Hello</label>
  </form>
</div>