html - 输入事件状态下标签转换的意外行为

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

By default, the origin of a transform is "50% 50%", which is exactly in the center of any given element.

尝试将 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>