html - 输入文本字段,不动画(材料设计)
问题描述
我有一个 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>
我究竟做错了什么?
我提前说谢谢。
解决方案
我之前也遇到过这个问题,你只需要在你的 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您可以获得第一个找到的对象。
推荐阅读
- reactjs - 函数隐含返回类型“任何”错误
- database - 基于 Postgres 中另一个表中的整数列限制关系行数的最佳方法
- merge - 数据仓库事实表 - MERGE OR DROP & INSERT
- powerbi - 磁盘上的存储大小可以比压缩后的大小减少 20%
- c++ - clang 不支持使用模板的显式构造函数调用
- storage - 游戏如何存储故事情节之类的数据?
- javascript - 更改 javascript onclick 中的按钮文本
- python - Python和Python分类器
- java - 为什么 Equals() 函数不返回 true..?
- excel - 用分隔符连接单元格但跳过空(非空白)单元格?