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;
}

注: プレースホルダーを削除する必要がある場合は、ラベル要素内のテキストを削除すると、アニメーションが保持されます