当角度4分量加载

Question

我遇到了css过渡和角度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转换应用于输入，就像输入是＆＃34;初始化＆＃34;到我为输入定义的css属性：

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

谢谢！

编辑：问题的根源是加载了ngIf的插件代码镜像，并在引擎盖下应用了一个样式到我的输入（本身从另一个组件加载！），但是带有css转换它完成了上面的渲染，所以我用[hidden]显示它，一切正常。

Answer 1

您可以使用angular's animation system来获取所需内容。

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