文本输入效果绑定到<label>

Question

为什么下划线动画依赖于<label>标签？换句话说，如果从mdl-textfield中删除<label>，也会删除动画。

其他人都注意到这个？

Answer 1

这是因为Text field section中的CSS规则：

.mdl-textfield__label::after {
    background-color: #3f51b5;
    bottom: 20px;
    content: "";
    height: 2px;
    left: 45%;
    position: absolute;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
    width: 10px;
}

如果检查上述转换属性，则在输入聚焦时完成动画：

.mdl-textfield.is-focused .mdl-textfield__label::after {
  left: 0;
  width: 100%;
  visibility: visible;
}

注意：如果您需要删除占位符，请删除标签元素内的文字，它将保留动画