输入文本字段，不动画（材料设计）答案

【问题标题】：Input text fields, doesn't animate (material Design)输入文本字段，不动画（材料设计）
【发布时间】：2019-03-24 01:19:22
【问题描述】：

我有一个 MDC 设置，但我的文本字段没有动画。

https://imgur.com/a/1h27vhD 此链接显示了它应该处于的状态，以及我的字段所处的状态。

第一张图片来自我的网站，您可以在其中看到标签在进入活动状态时没有像底部图片那样动画到顶行。底部图片直接来自 Google Material Design 演示页面。

<link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

<div class="mdc-text-field mdc-text-field--outlined">
  <input type="text" id="tf-outlined" class="mdc-text-field__input">
  <label for="tf-outlined" class="mdc-floating-label">Your Name</label>
  <div class="mdc-notched-outline">
    <svg>
                                  <path class="mdc-notched-outline__path"/>
                                </svg>
  </div>
  <div class="mdc-notched-outline__idle"></div>
</div>

我做错了什么？

我先说谢谢。

【问题讨论】：

如果您看到任何 js 错误，您可以在浏览器控制台中查看吗？
有，给出如下。即使样式已完美加载。 imgur.com/a/L2cO3tl

标签： html css material-design

【解决方案1】：

这是一个可能的解决方案：

你摆脱了<label></label>。
您将placeholder="Your Name" 属性添加到您的<input> 标记
您使用 css 将占位符隐藏在焦点上

HTML：

<input type="text" id="tf-outlined" class="mdc-text-field__input" placeholder="Your Name">

CSS：

.mdc-text-field__input:focus::placeholder {
  visibility: hidden;
}

片段：

.mdc-text-field__input:focus::placeholder {
  visibility: hidden;
}

<link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

<div class="mdc-text-field mdc-text-field--outlined">
  <input type="text" id="tf-outlined" class="mdc-text-field__input" placeholder="Your Name">
  <div class="mdc-notched-outline">
    <svg>
                                  <path class="mdc-notched-outline__path"/>
                                </svg>
  </div>
  <div class="mdc-notched-outline__idle"></div>
</div>

【讨论】：

【解决方案2】：

使用下面的代码 sn-p。也可以使用mdc.autoInit();

mdc.autoInit();

   <link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
          
          
<body>   
     
     <div class="mdc-text-field mdc-text-field--outlined  mdc-text-field--with-trailing-icon" data-mdc-auto-init="MDCTextField">
      <i class="material-icons mdc-text-field__icon">delete</i>
      <input type="text" id="my-input" class="mdc-text-field__input">
      <label for="my-input" class="mdc-floating-label">Standard</label>
      <div class="mdc-notched-outline">
        <svg>
          <path class="mdc-notched-outline__path"/>
        </svg>
      </div>
      <div class="mdc-notched-outline__idle"></div>
    </div>


   <script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>
           
</body>

【讨论】：

如何使用 mdc.autoInit();
不需要额外的设置或代码将其放在 JS 代码中的任何位置或加载 DOM 之后。添加data-mdc-auto-init="MDCTextField" 检查我的代码也很重要。我还为图标添加了Material Icons css 库。

【解决方案3】：

我之前也遇到过这个问题，你只需要在你的Javascript文件中添加以下行：

mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));

这段 Javascript 代码将 CSS 动画标签效果与您的 div .mdc-text-field 相关联，并且按照您的顺序：

<div class="mdc-text-field">
  <input type="text" id="my-text-field" class="mdc-text-field__input">
  <label class="mdc-floating-label" for="my-text-field">Label</label>
  <div class="mdc-line-ripple"></div>
</div>

这就是为什么您无法在组件中看到正确的标签动画。我认为 MDC 文档很好，但不够具体。

如果问题仍然存在，请告诉我，我会尽快检查您的问题，您好！

编辑：我忘了说；要获取您网站中的所有文本字段，您必须使用：

const edtTexts = [].map.call(document.querySelectorAll('.mdc-text-field'), function(el) {
  return new mdc.textField.MDCTextField(el);
});

所以你得到一个数组，每个 div 都带有 class="mdc-text-field"。使用 document.querySelector 您可以获得第一个找到的对象。

【讨论】：

【解决方案4】：

这个对我有用。

import {MDCTextField} from '@material/textfield';

const mdcTexts = [].map.call(document.querySelectorAll('.mdc-text-field'), function(el) {
    return new MDCTextField(el);
});

【讨论】：