绑定到 <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;
}

注意：如果需要去掉占位符，去掉label元素里面的文字，会保留动画

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

Text Input Effect Tied to <label>

material-design-lite