material-design-lite - 文本输入效果绑定到

Question

为什么下划线动画取决于<label>存在的标签？换句话说，如果您<label>从 mdl-textfield 中删除 ，动画也会被删除。

还有人注意到这一点吗？

Answer 1

这是因为文本字段部分中的这个 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元素里面的文字，会保留动画