Angular Material表单字段标签/占位符动画控制

Question

在Angular Material上下文中，我们是否有可能修改表单字段的浮动标签动画，甚至定义全新的动画呢？

谢谢您的帮助。

- developer

Answer 1

你可以尝试使用这个 CSS 类来修改标签动画：

.mat-form-field-appearance-outline .mat-form-field-can-float .mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.4em) translateX(1em) scale(.80);
    color: #ff0000;
}

使用这个类：

.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-outline-gap{
  margin-right: 4em;
}

你可以尝试更改轮廓间隙（注意，这样做不仅会改变顶部边框，也会改变底部边框）。 我没有多少使用这些类，所以我不确定它们是否是你的唯一需要的类。 希望能有所帮助 ;)

- Ingrik