css - 当 Angular 4 组件加载时防止 css 转换

Question

我对 css transitions 和 angular 4 有很大的疑问。 实际上，我使用了一个提供输入计数器的外部库(这是我的库，所以我知道没有更多的样式应用于包装的输入)，但在应用程序上我有以下输入样式:

input {
    &[type="text"],
    &[type="password"],
    &[type="email"] {
        border-radius: 4px;
        border: 1px solid $grey-color;
        padding: 0.5rem 1rem;
        outline: none;
        width: 100%;
        transition-property: all;
        transition-duration: 300ms;
        font-size: inherit;
    }
}

在 html 模板中:

<input-counter 
    type="text" 
    placeholder="Name" 
    [maxlength]="nameMaxLength"
    [(ngModel)]="name">
</input-counter>

<input-counter> 组件模板:

<style>
  .input-counter-group {
    display: block;
    position: relative;
  }

  .input-counter-group span {
    color: #b0b0b0;
    font-size: 10px;
  }

  .input-counter-group .text-input-counter {
    position: absolute;
    line-height: 10px;
    right: 0;
    bottom: -13px;
  }
</style>
<div class="input-counter-group">
  <input 
    [id]="id" 
    [type]="type"
    [ngClass]="className" 
    [name]="name" 
    [placeholder]="placeholder" 
    [maxlength]="maxlength" 
    [disabled]="disabled" 
    [pattern]="pattern" 
    [required]="required" 
    [readonly]="readonly"
    [(ngModel)]="value"
    (focus)="onFocus()" 
    (blur)="onBlur()">
  <span *ngIf="enabled" class="text-input-counter">
    <span *ngIf="displayMinLength()">{{ minlength }} characters at least required: </span>{{ counter }}<span *ngIf="displayMaxLength()">/{{ maxlength }}</span>
  </span>
</div>

问题是当加载组件时，css 转换应用于输入，就像输入被“初始化”为我为输入定义的 css 属性一样:

这个动画出现在组件 <input-counter> 时 被显示，而唯一应该发生的动画是当输入悬停时边框颜色发生变化。

谢谢!

编辑:问题的根源是加载了 ngIf 的插件 codemirror , 并在引擎盖下对我的输入应用了一个样式(它本身是从另一个组件加载的!)，但是通过 css 转换它完成了上面的渲染，所以我用 [hidden] 显示它一切正常。

Answer 1

您可以使用 angular's animation system得到你正在寻找的东西。

为您的输入计数器组件创建一个动画触发器，将其附加到您需要在模板中设置动画的任何标记，并在您需要进行转换时更改触发器的状态。